LUCKY

Welcome to Us !

Javascript全选全不选,单选所有变全选

lucky Javascript 2018/01/16

废话少说,直接上代码

<table class="table table-striped table-hover table-fw-widget" id="table2">
     <thead>
         <tr>
         <th><input type="checkbox" name="all_check"></th>
<th>任务名称</th>        
<th>创建用户</th>
         <th>创建时间</th>
         <th>任务类型</th>
         <th>任务号码</th>
         <th>拨打时段</th>
         <th>状态</th>
         <th>操作</th>
         </tr>
     </thead>
     <tbody>
          <tr class="odd gradeX">
             <td><input type="checkbox" value="6" name="ids[]"></td>
             <td>qqqqq</td>
             <td>samcoder</td>
             <td>2018-12-14 17:41:07</td>
             <td>Coldcall场景</td>
             <td>template6.xlsx</td>
             <td>09:00:00至09:05:00</td>
             <td>未分配robot</td>
               <td>
              <p class="mt-2 mb-2">
              <button class="btn btn-space btn-primary active running" data-id="6">启动</button>
              <button class="btn btn-space btn-danger active">暂停</button>
              <button class="btn btn-space btn-warning active">删除</button>
              </p>
             </td>
          </tr>
          <tr class="odd gradeX">
          <td><input type="checkbox" value="7" name="ids[]"></td>
          <td>测试</td>
          <td>samcoder</td>
          <td>2018-12-14 23:04:31</td>
          <td>Coldcall场景</td>
          <td>template6.xlsx</td>
          <td>09:00:00至09:24:00</td>
          <td>未分配robot</td>
          <td>
         <p class="mt-2 mb-2">
            <button class="btn btn-space btn-primary active running" data-id="7">启动</button>
            <button class="btn btn-space btn-danger active">暂停</button>
            <button class="btn btn-space btn-warning active">删除</button>
          </p>
        </td>
       </tr>
                          
  </tbody>
</table>
<script type="text/javascript">
      $(document).ready(function(){
         arr_ids = []; //初始化数组
         check_length = $("input[name='ids[]']").length;
         //全选/全不选
          $("input[name='all_check']").click(function() {
                //console.log($(this).prop('checked'));
                arr_ids = [];
                if($(this).prop('checked') == true){
                    $("input[name='ids[]']").each(function(i,v) {
                       arr_ids.push($("input[name='ids[]']").eq(i).val());
                       $("input[name='ids[]']").eq(i).prop('checked','checked');
                    })
                }else{
                    $("input[name='ids[]']").each(function(i,v) {
                       $("input[name='ids[]']").eq(i).prop('checked',false);
                    });
                    arr_ids = [];
                }
                //console.log(arr_ids);
          });
          //点击单个checkbox
          $("input[name='ids[]']").click(function() {
            arr_ids = [];
            $("input[name='ids[]']").each(function(i,v) {
               if($("input[name='ids[]']").eq(i).prop('checked') == true){
                    arr_ids.push($("input[name='ids[]']").eq(i).val());
                    $("input[name='ids[]']").eq(i).prop('checked','checked')
               }else{
                   $("input[name='ids[]']").eq(i).prop('checked',false)
               }
                judge();
            })
            console.log(arr_ids);
          })
      })
      //判断选中的和总个数是否相同
      function judge() {
        if(arr_ids.length == check_length){
           $("input[name='all_check']").prop('checked','checked');
        }else{
           $("input[name='all_check']").prop('checked',false);
        }
      }
</script>