全选与反选

最新推荐文章于 2024-11-08 10:30:00 发布

Mr_liuxiaoyang

最新推荐文章于 2024-11-08 10:30:00 发布

阅读量119

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Mr_liuxiaoyang/article/details/129939974

版权

话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="checkbox" id="all">全选
    <hr>
    <input class="active" type="checkbox" value="1">打球
    <input class="active" type="checkbox" value="2">购物
    <input class="active" type="checkbox" value="3">编程
    <script>
        //全选
        let _all=document.querySelector("#all")
        //反选
        let _actives=document.querySelectorAll(".active")

        //点击全选
        _all.onclick=function(){
            _actives.forEach(_active=>{
                //让每一个反选框与全选chekced一致
                _active.checked=_all.checked;
            })
        }


        _actives.forEach(_active=>{
            _active.onclick=function(){
                //获取所有带checked属性的input框
                let checkboxes=document.querySelectorAll(".active:checked")
                _all.checked=checkboxes.length==_actives.length

                //长度相同，说明全部选中
                // if(checkboxes.length==_actives.length){
                //     _all.checked=true;
                // }else{
                //     _all.checked=false;
                // }

               
            }
        })

    </script>
</body>
</html>