jQuery实现复选框的全选，全不选，反选

Posted zhrujia

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现复选框的全选，全不选，反选相关的知识，希望对你有一定的参考价值。

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title></title>
   
  <style type="text/css">
  .mytable
  {
  width: 300px;
  }
  .mytable td{height:30px;border:1px solid #aaccff;padding:3px 5px;}
  .mytable td label{margin-right:5px;}
  .box{border:1px solid #aaccff;padding:10px;margin:5px 3px;line-height:25px;}
  </style>
  <script src="Script/jquery-3.3.1.js"></script>
  <script type="text/javascript">
 

$(function () {
 

//全选

$("#selectAll").click(function () {
  $(":checkbox").prop("checked", true);
 

});
 

//全不选

$("#selectNotAll").click(function () {
  $(":checkbox").prop("checked", false);
  });
   
 

//反选

$("#selectRevorse").click(function () {//方法一
   
  $("input[type=checkbox]").each(function () {
   
  $(this).prop("checked", !$(this).prop("checked"));
   
  });
  //$(":checkbox").each(function () {//方法二
  // this.checked=!this.checked;
  //});
   
  });
   
   
  })
  </script>
  </head>
  <body style="font-size:12px;">
  <div class="box">
  请编写javascript代码，完成如下功能要求：<br />
  1.实现全选、反选、全不选功能
  </div>
  <div class="box1">
   
  <table id="table1" class="mytable">
  <tr>
  <td style="color:Red;font-weight:bold;font-size:13px;">问卷调查：您最喜欢歌手是谁？</td>
  </tr>
  <tr>
  <td>
  <label><input type="radio" name="selectMode" id="selectAll" />全选</label>
  <label><input type="radio" name="selectMode" id="selectNotAll" />全不选</label>
  <label><input type="radio" name="selectMode" id="selectRevorse" />反选</label>
  </td>
  </tr>
  <tr>
  <td>
  <label><input type="checkbox" id="Checkbox3"/>刘德华</label>
  <label><input type="checkbox" id="Checkbox4"/>张学友</label>
  <label><input type="checkbox" id="Checkbox5" />孙燕姿</label>
  <label><input type="checkbox" id="Checkbox6" />刘欢</label>
  </td>
  </tr>

 

</table>

 

 

 

</div>

 

</body>

 

</html>

 

以上是关于jQuery实现复选框的全选，全不选，反选的主要内容，如果未能解决你的问题，请参考以下文章

jQuery实现复选框全选全不选反选问题解析

jquery easyui的全选

多选框的全选和全不选(复制)

js实现复选框的全选全不选和反选

js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动

特效复选框的全选全不选反选操作