js 全选

最新推荐文章于 2024-04-02 19:39:43 发布

“负拾捌”

最新推荐文章于 2024-04-02 19:39:43 发布

阅读量1k

点赞数 1

分类专栏：牛客js刷题文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_49438920/article/details/125140813

版权

牛客js刷题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

描述
请补全JavaScript代码，实现以下效果：

选中"全选"框，以下所有选项全部勾选。
把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
当其他复选框全部选中，"全选框"为选中状态。
当其他复选框有一个未选中，"全选框"取消选中状态。

在这里插入图片描述

注意：
.必须使用DOM0级标准事件（onchange）

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
        <style>
            ul {
                list-style: none;
            }
        </style>
    <body>
        <ul>
            <li>全选<input type='checkbox' id='all'></li>
            <li>Java<input type='checkbox' class='item'></li>
            <li>javaScript<input type='checkbox' class='item'></li>
            <li>C++<input type='checkbox' class='item'></li>
            <li>python<input type='checkbox' class='item'></li>
            <li>.net<input type='checkbox' class='item'></li>
        </ul>

        <script>
            // 补全代码
            var all = document.querySelector('#all')
            var op = document.querySelectorAll('.item')
            var options = Array.from(op)
            all.onchange = function() {
                options.forEach(i=>{
                    i.checked = all.checked
                })
            }
           
            options.forEach(i=>{
                i.onchange = function() {
                    all.checked = options.every(it=>{
                        return it.checked == true
                    })
                }
            })
        
        </script>
    </body>
</html>

思路
1.获取全选的input节点，以及所有的选项节点
2.实现点击全选按钮，其余选项全部选择的效果通过forEach遍历实现，将全选按钮的checked属性值赋给选项节点的checked属性值
3.实现选项节点是否全部选中来操控全选按钮的状态，通过为每个选项节点绑定一个onchange事件，点击选项节点后用ervery判断其余选项是否都已全部选中，若全选中则改变全选节点的状态为true。（注意，every只能用于数组身上，我们获取到的dom节点集合只是一个伪数组，需要用Array.from将伪数组转化为真数组）