jquery checkbox设置选中,全选,反选,取值

    <form>
        你爱好的运动是?
        <input type="checkbox" name="check1" id="CheckAll"/>全选/全不选<br />
        <input type="checkbox" name="check2" id="opCheckAll"/>反选<br />
        <input type="checkbox" name="items" checked="checked" value="足球"/>足球
        <input type="checkbox" name="items" checked="checked" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
    </form>
    <input value="dianji" id="btn" type="button"/>

  

    ///////属性过滤选择器
	  
	  //获取 input标签type=checkbox的元素  第一种写法
	   $("input[type=checkbox]").click(function(){
	  	  alert($(this).attr("id"));
	   });

  

	//获取 input标签type=checkbox的元素  第二种写法(中间不能有空格)
	  $(":input[type=checkbox]").click(function(){
		  alert($(this).attr("id"));
	 });
	
	//表单对象过滤器 :input=${"input"}
		   :checkbox=${input[type=checkbox]}
	           :radio=${input[type=radio]}


//表单对象过滤器(:input :text :radio :checkbox :hidden)+属性过滤器
      获取 input标签type=checkbox的元素 第三种写法
       $(":checkbox[name=check2]").click(function(){
         alert($(this).attr("name"));
       });

  

表单属性过滤器 :checked =$("input[checked=checked]")
	 :selected=$("input[selected=selected]")
         alert($("form [checked=checked]").length);

  

  //全选
	  $(":checkbox[name=check1]").click(function(){
		  //设置 disabled,checked,selected这些属性时  一律用prop来替代 不用attr防止出错 
		  $(":checkbox[name=items]").prop("checked",this.checked);  
	  });

  

 //反选
	 // $(":checkbox[name=check2]").click(function(){
		 // $(":checkbox[name=items]").prop("checked",!$(this).attr("checked"));  这只是根据[name=check2]的checked属性来设置选中  错误
	  //});
	  //反选  遍历元素集合的每一个元素
	  $(":checkbox[name=check2]").click(function(){
		  $(":checkbox[name=items]").each(function(){
			 //  $(this).prop("checked",!$(this).prop("checked"));  //第一种方法
			 this.checked=!this.checked;//第二种方法   js
			 
		   });
	  });

  

 //jquery  给一组checkbox添加事件  js添加一组元素事件很麻烦
	  $(":checkbox[name=items]").click(function(){
		  alert("123");
	  });

      //获取每一个点击项的值
      $(":checkbox[name=items]").click(function(){
        alert($(this).val());
       });

  

  //获取选中项的值/设置选中项
	  $("#btn").click(function(){
		  //var s=$("[name=items]:checked").val();
		  
		 // 获取选中项的值
		 // var s="";
		  //$(":checked").each(function(){
			//  s+=$(this).val();
		 // });
		  alert(s);
	  });
	  

  

posted on 2017-07-20 09:44  lkjhgfdsa123  阅读(280)  评论(0编辑  收藏  举报