Jquery 实现checkbox的反选,全选，全不选.

本是古典何须时尚 2024-02-17 18:16 82阅读 0赞

**HTML 页面结构**

<div>
      <input name="chkItem" type="checkbox" value="今日话题"/>
      今日话题
      <input name="chkItem" type="checkbox" value="视觉焦点" />
      视觉焦点
      <input name="chkItem" type="checkbox" value="财经" />
      财经
      <input name="chkItem" type="checkbox" value="汽车" />
      汽车
      <input name="chkItem" type="checkbox" value="科技" />
      科技
      <input name="chkItem" type="checkbox" value="房产" />
      房产
      <input name="chkItem" type="checkbox" value="旅游" />
      旅游 </div>
    <div>
      <input id="btnCheckAll" type="button" value="全选" />
      <input id="btnCheckNone" type="button" value="全不选" />
      <input id="btnCheckReverse" type="button" value="反选" />
      <input id="btnSubmit" type="button" value="提交" />
    </div>
    <div id="msg"></div>

**JS**

<script type="text/javascript">
       $(function(){
    	   
    	   //全选
    	  $("#btnCheckAll").click(function(){
    		  // checked="checked" 
    		  //匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
    		//方法1：
            //  $("input:checkbox").attr("checked","checked");
    		
    		//方法2：
    		$("input:checkbox").attr("checked",true);
    	}); 
    	
    	  
    	  //全不选
    	  $("#btnCheckNone").click(function(){
    
             //方法1：
             // $("input:checkbox").removeAttr("checked");
    		 
    		 //方法2：
    		   $("input:checkbox").attr("checked",false);
    	 }); 
    	 
    	 
    	 //反选
    	  $("#btnCheckReverse").click(function(){
    		  // checked="checked" 
    		  //遍历
    		  $("input:checkbox").each(function(){
    			  
    			  //方法1：
    			    this.checked=!this.checked;
    				
    				
    		      //方法2：
    			  //判断
    			  // is(expr|obj|ele|fn)
    			 /* if($(this).is(":checked")){
    				  $(this).attr("checked",false);
    			  }else{
    				  $(this).attr("checked",true);  
    			  }*/
    			  
    		  });
    	 });
    	 
    	  
    	  //提交选中的值
    	   $("#btnSubmit").click(function(){
    		   var str="";
    		   //遍历数据
    	       $("input:checkbox").each(function(){
    			   //判断是否被选中
    			   if($(this).is(":checked")){
    				   str+=$(this).val()+" ";   
    			   }
    			   
    		   });
    		   //添加到层上显示数据
    		  $("#msg").html(str);
    	 });
    	   
      });
    </script>

效果：

1)运行时

![Center][]

2）选择\{全选\}

![Center 1][]

3）选择\{全不选\}

![Center 2][]

4）选择其中2个选项

![Center 3][]

5）选择\{反选\}

![Center 4][]

6）选择\{提交\}

![Center 5][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/aee2cf1909ec4971b121d2838699fb90.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ce7363cbdbfe45889b5507e3d5615ce1.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4ae159a992004612abb1f5afe14e50c6.png
[Center 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/8023c275209f4355a2cceb9d6a42d077.png
[Center 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ab452ebf5d024fd79d0d096d2b6010ae.png
[Center 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/91769c36cf4e4a44b41e26588be5ba53.png

发表评论取消回复

表情：

评论列表（有 0 条评论，82人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery 实现checkbox的反选,全选，全不选.

HTML 页面结构 <div> <input name="chkItem" type="checkbox" value="今日话题"/> 今日

本是古典何须时尚/ 2024年02月17日 18:16/ 0 赞/ 83 阅读

相关 jQuery 循环获取checkbox复选框的值，checkbox全选、全不选、反选

前端页面html <tr v-for="(log,index) in logList">

川长思鸟来/ 2022年11月08日 14:28/ 0 赞/ 275 阅读

相关 jQuery实现全选、反选、全不选效果

jQuery实现全选、反选、全不选效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

柔光的暖阳◎/ 2022年09月18日 05:00/ 0 赞/ 269 阅读

相关 jQuery实现的Checkbox“全选/全不选”

自己实现的checkbox的“全选/全不选”，只需要传入“全选/全不选”checkbox的id属性和行的checkbox的name属性即可 / 全选/全不

- 日理万妓/ 2022年08月11日 03:22/ 0 赞/ 279 阅读

相关 jQuery实现CheckBox全选、全不选

`<!DOCTYPE html PUBLIC` `"-//W3C//DTD XHTML 1.0 Transitional//EN"` `"http://www.w3.org/T

悠悠/ 2022年06月14日 12:16/ 0 赞/ 251 阅读

相关 jQuery实现CheckBox全选、全不选

<script src="jquery-1.6.2.min.js"></script> <input type="checkbox" id=

喜欢ヅ旅行/ 2022年06月12日 00:17/ 0 赞/ 276 阅读

相关 jquery checkbox全选/反选

使用jquery全选和反选多选框 $('.ck').each(function(){ if($(this).is(':checked')){

青旅半醒/ 2022年06月10日 08:13/ 0 赞/ 323 阅读

相关 jquery 完成checkBox完成全选\全不选\反选的功能

//本例子中要注意.prop和attr的区别: .prop:获取原生属性时使用 .attr:获取自己添加的属性使用 <head> <script src=

叁歲伎倆/ 2022年06月03日 04:49/ 0 赞/ 246 阅读

相关 jQuery实现checckbox的全选、全不选、反选

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

浅浅的花香味﹌/ 2022年05月19日 10:15/ 0 赞/ 279 阅读

相关 JQuery实现checkbox全选和反选

function selectAll(){ //id=all是全选/反选的checkbox，判断是选中还是没选中 var isChecked=$

今天药忘吃喽~/ 2022年05月08日 11:26/ 0 赞/ 250 阅读