451day（表格全选案例）

最新推荐文章于 2022-08-04 14:00:30 发布

orangecloudy

最新推荐文章于 2022-08-04 14:00:30 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/orangecloudy/article/details/85332901

本文介绍了一种使用jQuery实现表格全选功能的方法。通过监听全选框和子项复选框的状态变化，确保两者状态的一致性。示例中包含了红烧肉、西红柿鸡蛋等菜品的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

《2018年12月28日》【连续451天】

标题：表格全选案例；
内容：

<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 () {
      $("#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>