复选框全选案例

凉沫serendipity

已于 2023-03-26 08:56:26 修改

阅读量540

点赞数

分类专栏： JavaScript 文章标签： css html javascript

于 2023-02-28 21:58:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_50582468/article/details/129270952

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

该文章描述了一个使用HTML和CSS构建的基础表格结构，包含一个全选按钮和多个小复选框。通过JavaScript实现了全选按钮控制所有小复选框的状态，以及小复选框状态变化时影响全选按钮的功能。主要涉及点击事件监听和元素状态同步。

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

一、思想

（1）当点击或取消全选按钮时，其为点击事件（为大复选框注册点击事件），应将小复选框的checked设置为和大复选框一致。

（2）选中所有小复选框或未全选时（为小复选框注册点击事件），大复选框也跟着做相应的变化

主要是判断小复选框被选中的个数是否和所有小复选框个数相同

二、基本框架部分

（1）基础框架部分

<table>
    <tr>
      <th class="allCheck">
        <input type="checkbox" name="" id="checkAll"> <span class="all">全选</span>
      </th>
      <th>商品</th>
      <th>商家</th>
      <th>价格</th>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米手机</td>
      <td>小米</td>
      <td>￥1999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米净水器</td>
      <td>小米</td>
      <td>￥4999</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" name="check" class="ck">
      </td>
      <td>小米电视</td>
      <td>小米</td>
      <td>￥5999</td>
    </tr>
  </table>

(2)CSS样式部分

<style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 500px;
      margin: 100px auto;
      text-align: center;
    }

    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
      height: 24px;
    }

    td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }

    .allCheck {
      width: 80px;
    }
  </style>

三、主要功能实现部分

<script>
    // 全选控制小复选框
    // 1、当点击大复选框时，将小复选框的checked和大复选框设为一致
    const checkAll=document.querySelector('#checkAll')
    const cks=document.querySelectorAll('.ck')
    for(let i=0;i<cks.length;i++){
      checkAll.addEventListener('click',function(){
        cks[i].checked=checkAll.checked
      })
    }

    // 当小的复选框都选中时，将大的复选框也选中，判断小复选框被选中的个数
    for(let i=0;i<cks.length;i++){
      cks[i].addEventListener('click',function(){
        // 注意  :checked为伪类选择器，是否被选中
        checkAll.checked= (document.querySelectorAll('.ck:checked').length===cks.length)
      })
    }


  </script>