运算符、流程控制——全选、反选、全不选

html部分

<body>

<thead>
    <tr>
        <th class="bs-checkbox">
            <div class="th-inner">
                <input name="btSelectAll" type="checkbox"> //全选
            </div>
        </th>
    </tr>  
</thead>
<tbody>
    <tr>
        <td class="bs-checkbox">
            <input data-index="0" name="btSelectItem" type="checkbox"> //单选
        </td>
    </tr> 
    <tr>
        <td class="bs-checkbox">
            <input data-index="0" name="btSelectItem" type="checkbox"> //单选
        </td>
    </tr>     
</tbody>
</body>

js部分

<script>
  //单选全选
  $(function(){
      var radioInput = $("input[name='btSelectItem']");

      //全选
      $("input[name='btSelectAll']").click(function(){
          if ($(this).is(":checked") == true) {
              radioInput.each(function(){
                  $(this).prop("checked",true);
              }) 
          }else{
              radioInput.each(function(){
                  $(this).prop("checked",false);
              })  
          }
      })

      //单选   
      var checknum = radioInput.size(); //单选数量 
      radioInput.click(function () {
          var count = $("input[name='btSelectItem']:checkbox:checked").length; //选中个数
          if ($(this).is(":checked") == true) {         
              if(count == checknum){ 
                  $("input[name='btSelectAll']").prop("checked",true);
              }
          }else {
              $("input[name='btSelectAll']").prop("checked",false);                                                
          }
      });
  })    
</script>

效果图

这里写图片描述

版权声明:本文为xiaorouer888原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaorouer888/article/details/73335722