js实现全选按钮

最新推荐文章于 2024-04-02 19:39:43 发布
最新推荐文章于 2024-04-02 19:39:43 发布
阅读量238 收藏
点赞数 2
分类专栏： js案例 文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56713342/article/details/134533441
版权

目录

html代码

css代码

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>
        <!-- <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>华为手机</td>
        <td>华为</td>
        <td>￥5999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥2999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>三星电视</td>
        <td>三星</td>
        <td>￥4999</td>
      </tr> -->
    </table>

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: rgb(255, 0, 0);
            font: bold 16px '微软雅黑';
            color: #fff;
            height: 35px;
        }

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

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

js代码

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

根据需求写js代码

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

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

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

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

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

<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 += `
        <tr>
        <td>
          <input type="checkbox" name="check" class="ck"${item.checked ? 'checked' : ''
                    } />
        </td>
        <td>${item.name}</td>
        <td>${item.brand}</td>
        <td>${item.price}</td>
      </tr>
        `
            })
            document.querySelector('tbody').innerHTML = str
        }
        render()
//2.点击全选按钮 其他按钮都被选中
//绑定事件，让所有商品状态与全选按钮状态同步
        const checkAll = document.querySelector('#checkAll')
        const cks = document.querySelectorAll('.ck')//伪数组
        //change 状态发生改变时触发
        checkAll.addEventListener('change', function () {
            const that = this
            cks.forEach(function (item) {
                item.checked = that.checked
            })
        })
//单击每个商品 ，设置全选按钮状态
        cks.forEach(function (item) {
            item.addEventListener('change', function () {
                    // cks本身是伪数组，它身上没有every方法,需要转成真正的数组，才能使用
                checkAll.checked = Array.from(cks).every(function (item) {
                    return item.checked
                })
            })
        })
    </script>

完整代码

<!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: #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>
      <!-- <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>华为手机</td>
        <td>华为</td>
        <td>￥5999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥2999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="check" class="ck" />
        </td>
        <td>三星电视</td>
        <td>三星</td>
        <td>￥4999</td>
      </tr> -->
    </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 += `
          <tr>
        <td>
          <input type="checkbox" name="check" class="ck" ${
            item.good_status ? 'checked' : ''
          }/>
        </td>
        <td>${item.name}</td>
        <td>${item.brand}</td>
        <td>￥${item.price}</td>
      </tr>  
          `
        })
        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>

诗霖雪
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js全选按钮的实现方法
11-22
本文实例讲述了js全选按钮的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下：   具体代码如下 <html> <head> <title>复选框checked属性</title> [removed] function changeState(isChecked) { var chk_list=document.getElementsByTagName("input"); for(var i=0;i<chk_list.length
js全选按钮代码
weixin_33720956的博客
04-12 214
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）
最新发布
weixin_65793170的博客
04-02 1743
首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。
全选按钮的JS代码
weixin_30900589的博客
08-11 199
这是一段很常见的代码 <input type="checkbox" name="chkAll" id="chkAll" border="0" value="on" onClick="CheckAll(this.form)">function CheckAll(form) { for (var i=0;i<form.elements.length;i++) { var e ...
js 写全选按钮
weixin_46287150的博客
11-26 912
js 写全选按钮 css代码 <style> *{ margin: 0; padding: 0; } .box{ width: 100px; padding:20px; border-radius: 5px; border: 1px solid black; margin: 50p
js 全选按钮 和 删除代码
ttt015651的专栏
10-15 612
<script><br />function CheckAll(form) {<br />for (var i=0;i<form.elements.length;i++)    {<br />    var e = form.elements[i];<br />    if (e.name != 'chkall')       e.checked = form.chkall.checked; <br />   }<br />}<br /></script><br />全选复选框代码：<input name=
JavaScript第一篇之实现按钮全选、功能
10-21
全选按钮的实现 (this)" />全选 选项1 选项2 选项3 选项4 选项5 // 全选函数 function checkAll(e) { var t = document.getElementsByName("chk"); alert(t.length); for ...
javascript实现全选全不选
04-20
NULL 博文链接：https://sylqy.iteye.com/blog/1894273
js实现全选和全不选
10-15
它获取全选按钮，并根据当前选中状态来决定是否取消全选按钮的选中状态。如果所有子复选框都已选中，它将全选按钮设为选中状态： ```javascript function Item(e, allName) { var all = document....
【javascript】全选按钮
qq_63806300的博客
06-24 235
当点击全选按钮时，与之相关的所有选项都会被自动框选。
js全选按钮实现
袁成新（Chauncey Yuan）
11-04 1088
全选功能： 勾选或者取消全选按钮，其他按钮自动全部选中或者全部取消。 其他按钮未全部被选中时，全选按钮不勾选。 其他按钮全部被选中时，全选按钮自动勾选。 页面内容： <div> <ul> <li><input type="checkbox" id="check_all"><label for="check...
js实现(全选)多选按钮的方法【附实例】
11-26
第一种，全部选中： <html> <head> <title>复选框checked属性</title> [removed] function changeState(isChecked) { var chk_list=document.getElementsByTagName("input"); for(var i=0;i<chk_list.length;i++) { if(chk_list[i].type=
全选按钮制作javascript脚本.html
05-26
用javascript编译的全选按钮制作javascript脚本.html
js实现全选按钮功能
qq_44075557的博客
11-15 468
js实现全选按钮功能 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选</title> </head> <body> <div id="wp"> <input type="checkbox...
JS之全选按钮的实现
前端开发,HTML5,css3,JavaScript,node.js,vue
11-01 780
/ 点击其中一个按钮的时候, 判断其他几个 的选中状态是否为 true;如果都是true 那么选中全选;//获取所有class为item的元素,并且输出为真数组。//获取所有class为item的元素,并且输出为真数组。//获取所有class为item的元素,并且输出为真数组。// 获取class为allBtn的元素。// 获取class为allBtn的元素。// 获取class为allBtn的元素。//取消选中1~4选项。//取消选中1~4选项。
JS简单的全选按钮的实现
weixin_44258955的博客
08-20 783
1.html+css部分 <style> *{ margin: 0; padding: 0; } .box { width: 160px; padding: 5px; border: 1px solid #333; margin: 100px auto; } .box > div { padding: 15px;
js实现全选(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-04 456
js实现全选(附完整源码)
用js编写全选/全不选/反选
m0_53679993的博客
04-13 2160
运行出来的图片： 在html的代码如下： 在这里插入代码片 ```<form action="" method="post"> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球"/>足球 <input type="chec
js全选按钮
06-02
实现JS全选按钮的基本思路是：通过监听全选按钮的点击事件，来改变其他复选框的选中状态。以下是一个简单的实现方法： HTML代码： ``` <input type="checkbox" id="select-all"> 全选 <input type="checkbox" class="checkbox-item"> 选项1 <input type="checkbox" class="checkbox-item"> 选项2 <input type="checkbox" class="checkbox-item"> 选项3 ``` JS代码： ``` // 获取全选按钮和每个复选框 var selectAll = document.getElementById('select-all'); var checkBoxes = document.getElementsByClassName('checkbox-item'); // 给全选按钮添加点击事件监听器 selectAll.addEventListener('click', function() { // 遍历每个复选框，将它们的选中状态改为全选按钮的状态 for (var i = 0; i < checkBoxes.length; i++) { checkBoxes[i].checked = selectAll.checked; } }); ``` 在上述代码中，我们首先通过 `getElementById` 方法获取了全选按钮，然后通过 `getElementsByClassName` 方法获取了所有的复选框。接下来，我们给全选按钮添加了一个点击事件监听器，当全选按钮被点击时，我们遍历所有的复选框，将它们的选中状态改为全选按钮的状态。这样，当用户点击全选按钮时，所有的复选框都会被选中，当用户取消全选时，所有的复选框都会取消选中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值