js实现商品的全选，反选

最新推荐文章于 2023-02-06 18:56:28 发布

I like study.

最新推荐文章于 2023-02-06 18:56:28 发布

阅读量318

点赞数

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/rj2017211811/article/details/104655870

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

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
                }
            }

        })

I like study.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现商品的全选，反选

html+css部分<style type="text/css"> <div class="table-div2"> <table class="table2"> <thead> <tr class="tr2"> <t...
复制链接

扫一扫

专栏目录