JS实现全选

最新推荐文章于 2023-08-22 17:48:34 发布

87小太阳

最新推荐文章于 2023-08-22 17:48:34 发布

阅读量185

点赞数

分类专栏： JS案例 JS必会项目案例文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_53798158/article/details/127821832

版权

HTML JavaScript 全选 checkbox 前端开发

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

JS案例同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

JS必会项目案例

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 5px;
            margin: 50px auto;
        }

        hr {
            margin: 10px 0;
        }
    </style>
</head>

<body>


    <div class="box">
        <input type="checkbox"> 全选
        <hr>
        <input class="item" type="checkbox"> 选项一 <br>
        <input class="item" type="checkbox"> 选项二 <br>
        <input class="item" type="checkbox"> 选项三 <br>
        <input class="item" type="checkbox"> 选项四 <br>
    </div>

    <script>
        // 用户点击全选 
        // 如果全选按钮被选中  那么 下面四项都被选中 

        //如果下面四项都选中了 那么全选也被选中
        
        // 01 先选中元素 
        // 全选 
        var allBtn = document.querySelector('input');
        var items=  [...document.querySelectorAll('.item')];
        // console.log(items)
        allBtn.onclick = function(){
            items.forEach(function(item){
                item.checked = allBtn.checked
            });
        }
        items.forEach(function(item){
            item.onclick = handler; 
        })
        function handler(){
            allBtn.checked = items.every(function(item){
            return item.checked == true;
            })
        }

    </script>
</body>

</html>