dom 全选和反选

利用JS dom 实现点击全选框实现全选和全不选。
效果如下：

js代码部分

<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

           
            }
        })

html代码部分

 <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">编程