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

最新推荐文章于 2021-05-31 03:49:16 发布

weixin_33752045

最新推荐文章于 2021-05-31 03:49:16 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lt123/p/7209495.html

本文介绍了一种使用jQuery简化表单操作的方法，包括全选、反选及获取选中项等常见需求的具体实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <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);
	  });

转载于:https://www.cnblogs.com/lt123/p/7209495.html