js实现商品的全选，反选

桃扇骨 2023-07-11 06:16 9阅读 0赞

html+css部分

<style type="text/css">
     <div class="table-div2">
            <table class="table2">
                <thead>
                    <tr class="tr2">
                        <th class="th2"><input type="checkbox" class="selectAll"></th>
                        <th class="th2">商品</th>
                        <th class="th2">价格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="tr2">
                        <td class="td2"><input type="checkbox" class="checkbox1"></td>
                        <td class="td2">iphone11</td>
                        <td class="td2">5499</td>
                    </tr>
                    <tr class="tr2">
                        <td class="td2"><input type="checkbox" class="checkbox1"></td>
                        <td class="td2">iphone XS Max</td>
                        <td class="td2">6299</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    </style>
    <body>
     <div class="table-div2">
            <table class="table2">
                <thead>
                    <tr class="tr2">
                        <th class="th2"><input type="checkbox" class="selectAll"></th>
                        <th class="th2">商品</th>
                        <th class="th2">价格</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="tr2">
                        <td class="td2"><input type="checkbox" class="checkbox1"></td>
                        <td class="td2">iphone11</td>
                        <td class="td2">5499</td>
                    </tr>
                    <tr class="tr2">
                        <td class="td2"><input type="checkbox" class="checkbox1"></td>
                        <td class="td2">iphone XS Max</td>
                        <td class="td2">6299</td>
                    </tr>
                </tbody>
            </table>
        </div>
    
    
    </body>

js部分

var selectAllBtn = document.querySelector('.selectAll')
            var checkbox1s = document.querySelectorAll('.checkbox1')
            console.log(selectAllBtn)
            console.log(checkbox1s)
            var checkedNum = 0
            selectAllBtn.onclick = function () { 
                if (selectAllBtn.checked == true) { 
                    checkbox1s.forEach(function (checkbox, index) { 
                        checkbox.checked = true
                  
                    })
                    checkedNum=checkbox1s.length
                } else if (selectAllBtn.checked == false) { 
                    checkbox1s.forEach(function (checkbox, index) { 
                        checkbox.checked = false
                  
                    })
                    checkedNum=0
                    
                    console.log('selectAllBtn.checked =' + selectAllBtn.checked)
                }
            }
            
            checkbox1s.forEach(function (checkbox, index) { 
                /*checkbox.checked = false*/
                checkbox.onclick = function () { 
                    if (checkbox.checked == false) { 
                        checkedNum--
                    } else if (checkbox.checked == true) { 
                        checkedNum++
                    }
                   /*console.log('checkbox.checked='+checkbox.checked) console.log('checkedNum:' + checkedNum)*/
                    if (checkedNum !== checkbox1s.length) { 
                        selectAllBtn.checked = false
                    } else if (checkedNum == checkbox1s.length) { 
                        selectAllBtn.checked = true
                    }
                }
    
            })

发表评论取消回复

表情：

评论列表（有 0 条评论，9人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选）

首先为复选框添加了一个事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与复选框相同的状态。

缺乏、安全感/ 2024年04月22日 22:30/ 0 赞/ 139 阅读

相关 js实现商品的全选，反选

html+css部分 <style type="text/css"> <div class="table-div2"> <table

桃扇骨/ 2023年07月11日 06:16/ 0 赞/ 10 阅读

相关用 JS（JavaScript ）实现多选、全选、反选

JS小例题学习内容：需求总结：学习内容：需求用 JavaScript 实现全选、反选、多选实现代码 <!D

╰+哭是因爲堅強的太久メ/ 2023年01月16日 03:29/ 0 赞/ 267 阅读

相关 js实现全选、多选、反选（JQuery 实现）

jQuery 实现全选、多选、反选学习内容：需求总结：学习内容：需求 jQuery 实现全选、多选、反选实现代码

绝地灬酷狼/ 2022年10月16日 11:23/ 0 赞/ 267 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

深碍√TFBOYSˉ_/ 2022年08月26日 11:24/ 0 赞/ 314 阅读

相关 js实现全选/反选和单选

描述一般用在后台管理数据，以及购物车批量操作等多种情况 ![这里写图片描述][SouthEast] JS代码： <script type="te

浅浅的花香味﹌/ 2022年06月08日 09:48/ 0 赞/ 365 阅读

相关 js实现复选框的全选、取消全选、反选

思路很简单：全选：将所有复选框的checked设置为true 取消全选：将所有复选框的checked设置为false 反选：将所有选中的复选框设置为false，未选中的

朱雀/ 2022年05月18日 05:47/ 0 赞/ 467 阅读

相关原生js方式实现全选反选

/ 复习一下：原生js的一些知识，全选反选虽然是简单的案例，但是很多地方都能用到。先复习下原理知识点，后面再写一个点餐选择框实例 /

系统管理员/ 2022年05月16日 08:09/ 0 赞/ 184 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 330 阅读

相关 js 实现复选框全选和反选

//全选 function chooseAll() \{ var selects = document.getElementsByName('id

蔚落/ 2022年05月11日 13:42/ 0 赞/ 341 阅读