js实现全选按钮

html代码

先把整体结构样式写出来


  <table>
        <thead>
            <tr>
                <th class="allCheck">
                    <input type="checkbox" name="" id="checkAll" />
                    <span class="all">全选span>
                th>
                <th>商品th>
                <th>商家th>
                <th>价格th>
            tr>
        thead>
        <tbody class="goods">tbody>
        
    table>

css代码

对表格添加样式，使其呈现在页面美观

js代码

首先要先渲染页面，把整体样式通过js呈现在页面上

根据需求写js代码

点击全选按钮，其他按钮都被选中

绑定事件，让所有商品状态与全选按钮状态同步

单击每个商品设置全选按钮状态

单击某个商品所有商品都选中，全选按钮选中，只要有一个未选中全选按钮取消

要注意：cks本身是伪数组，它身上没有every方法,需要转成真正的数组，才能使用

完整代码


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: #f40;
        font: bold 16px '微软雅黑';
        color: #fff;
        height: 35px;
      }
 
      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }
 
      .allCheck {
        width: 80px;
      }
    style>
  head>
 
  <body>
    <table>
      <thead>
        <tr>
          <th class="allCheck">
            <input type="checkbox" name="" id="checkAll" />
            <span class="all">全选span>
          th>
          <th>商品th>
          <th>商家th>
          <th>价格th>
        tr>
      thead>
      <tbody class="goods">tbody>
      
    table>
    <script>
      // 定义商品数据
      const goods = [
        {
          id: +new Date(),
          name: '华为手机',
          brand: '华为',
          price: 5999,
          good_status: false,
        },
        {
          id: +new Date(),
          name: '小米净水器',
          brand: '小米',
          price: 2999,
          good_status: true,
        },
        {
          id: +new Date(),
          name: '三星电视',
          brand: '三星',
          price: 4999,
          good_status: false,
        },
      ]
      // 1 基本渲染
      function render() {
        let str = ''
        goods.forEach(function (item) {
          str += `
          
        
          ${
            item.good_status ? 'checked' : ''
          }/>
        
        ${item.name}
        ${item.brand}
        ￥${item.price}
        
          `
        })
        document.querySelector('.goods').innerHTML = str
      }
      render()
 
      // 2 点击全选 让所有商品 跟着变化
      // 思路：绑定事件 让所有商品状态与全选按钮状态同步
      const checkAll = document.querySelector('#checkAll')
      const cks = document.querySelectorAll('.ck') // 伪数组
      console.log(Array.isArray(cks)) // false
      console.log(cks.forEach) // 本身提供forEach方法用于遍历
      // change状态改变时候触发
      checkAll.addEventListener('change', function () {
        // console.log(this.checked) 全选按钮的状态
        const _this = this
        cks.forEach(function (item) {
          // console.log(this) //window
          // console.log(that)
          item.checked = _this.checked
        })
      })
 
      //3  单击每个商品 设置全选按钮状态
      // 思路: 单击某个商品   所有商品都选中全选按钮选中，只要有一个未选中全选按钮取消
      // cks本身是伪数组，它身上没有every方法,需要转成真正的数组，才能使用
      console.log(Array.isArray(Array.from(cks)))
      cks.forEach(function (item) {
        item.addEventListener('change', function () {
          checkAll.checked = Array.from(cks).every(function (item) {
            return item.checked
          })
        })
      })
    script>
  body>
html>

相关阅读:
LeetCode 362 期周赛
 Linux内核分析(九)--CPU上下文
 2020年12月 C/C++（三级）真题解析#中国电子学会#全国青少年软件编程等级考试
 【网管日记】在服务器docker上安装ubantu可视化桌面
 邱锡鹏神经网络怎么样,邱锡鹏神经网络答案
 Node 之 JavaScript 模块化开发
 神经网络：基本概念、模型与技术
 ES京东搜索
 【编程实践】黑框框里的打字小游戏，但是汇编语言
 Azure Functions Service Bus Trigger 对容器的支持
原文地址：https://blog.csdn.net/m0_56713342/article/details/134533441