js实现全选

最新推荐文章于 2024-04-22 16:35:15 发布

yqdidy

最新推荐文章于 2024-04-22 16:35:15 发布

阅读量3.1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/yqdid/article/details/125854670

版权

DOM0级事件全选复选框 JavaScript 事件监听

关键词由CSDN通过智能技术生成

js练习题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现要求：

选中"全选"框，以下所有选项全部勾选。
把"全选"框从选中状态勾选成未选中状态，其他复选框全部取消选中效果。
当其他复选框全部选中，"全选框"为选中状态。
当其他复选框有一个未选中，"全选框"取消选中状态。
注意：
必须使用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 options =Array.from( document.querySelectorAll('.item'));
            all.onchange = function(){
                options.forEach(item=>{
                    item.checked = all.checked;
                })
            }
            //监听当所有的选上后
            options.forEach(item=>{
                item.onchange = function(){
                    all.checked = options.every(x=>x.checked)
                }
            })
        </script>
    </body>
</html>