表格全选案例

最新推荐文章于 2023-04-10 17:44:38 发布

a63438840

最新推荐文章于 2023-04-10 17:44:38 发布

阅读量156

点赞数

原文链接：http://www.cnblogs.com/shanlu0000/p/11522928.html

版权

布局：

div.wrap > table > thead + tbody

thead > tr > th *3 (第一个 th 里面是一个 input )

tbody > tr (*3 ) > td *3 (第一个 td 里面是一个 input ）

案例分析：

1，thead中的全选按钮点击，tbody 中的第一列所有按钮跟随全选按钮的选中状态

2，tbody 中的按钮点击，判断是否四个都选中，如果都选中，上面的全选按钮选中，否则全选按钮不选中

关键代码

$("#j_cbAll").click(function(){
   $("#j_tb  input").prop("checked" , $(this).prop("checked")); 
})
$("#j_tb  input").click(function(){
   if($("#j_tb input:checked").length == $("#j_tb input").length)
   {
      $("#j_cbAll").prop("checked" , true);
   }
   else
   {
     
     $("#j_cbAll").prop("checked" , false);
   }
})

完整代码

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    
    th,
    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
      text-align: center;
    }
    
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
</head>
<body>
<div class="wrap">
  <table>
    <thead>
    <tr>
      <th>
        <input type="checkbox" id="j_cbAll"/>
      </th>
      <th>菜名</th>
      <th>饭店</th>
    </tr>
    </thead>
    <tbody id="j_tb">
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧肉</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>西红柿鸡蛋</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>红烧狮子头</td>
      <td>田老师</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>日式肥牛</td>
      <td>田老师</td>
    </tr>
    
    </tbody>
  </table>
</div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    $("#j_cbAll").click(function () {
      //修改下面的哪些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));
    });
  
    $("#j_tb input").click(function () {
  
      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }
  
    });
    
  });
</script>

</body>
</html>

转载于:https://www.cnblogs.com/shanlu0000/p/11522928.html

a63438840

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格全选案例

布局：div.wrap > table > thead + tbodythead > tr > th *3 (第一个 th 里面是一个 input )tbody > tr (*3 ) > td *3 (第一个 td 里面是一个 input ）案例分析：1，thead中的全选按钮点击，tbody 中的第一列所有按...
复制链接

扫一扫