js全选按钮

最新推荐文章于 2023-11-21 15:42:31 发布

J-Henry52

最新推荐文章于 2023-11-21 15:42:31 发布

阅读量590

点赞数

文章标签： javascript elementui css

本文链接：https://blog.csdn.net/qq_43124006/article/details/124640023

版权

这是一个关于HTML和JavaScript实现表格中全选功能的示例代码。通过监听全选按钮的改变事件，同步所有商品选项的选中状态，从而实现全选和全不选的功能。代码包括了HTML结构、CSS样式和JavaScript逻辑，适用于前端开发中的表格操作场景。

摘要由CSDN通过智能技术生成

1.全选功能

<!DOCTYPE html>

<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title></title>
    <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>
  </head>

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

    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" class="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      /*1.先找到所有的按钮
      2.再找根据按钮 找到die  table
      3.再去查找具体的 input*/
      let checkAlls = document.querySelectorAll(".checkAll")

      for (let i = 0; i < checkAlls.length; i++) {
        checkAlls[i].addEventListener("change",function(){
          console.log(1);
          let table  = this.parentNode.parentNode.parentNode.parentNode
          console.log(table);
          let inputs = table.querySelectorAll(".ck")

          for (let j = 0; j < inputs.length; j++) {
              inputs[j].checked = checkAlls[i].checked

            
          }
        })
        
      }

    

 

    </script>
  </body>
</html>

结果如下：