码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-08-16 10:38:02      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:font   put   height   his   fun   name   java   size   NPU   

<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实现复选框的全选,全不选,反选

标签:font   put   height   his   fun   name   java   size   NPU   

原文地址:https://www.cnblogs.com/zhrujia/p/9485122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!