javascript实现全选全不选

实现逻辑通过给全选添加点击事件，遍历所有的子选项将checked属性更改：

 <script>

        //获取元素

        var button_all = document.getElementById('button_all');

        var button_son = document.querySelector('.ul').getElementsByTagName('input');

        console.log(button_all,button_son);

        //绑定事件改变复选框的checked属性

        button_all.onclick = function(){

            var _this = this

            //遍历ul下的所有input复选框

            for(var i=0; i<=button_son.length;i++){

                //将每一个input复选框的checked属性更改

                button_son[i].checked = _this.checked

            }

        }

        //给每个复选框添加点击事件

        for(var i=0;i<=button_son.length;i++){

            button_son[i].onclick = function(){

                //这里是定义全选的checked状态为真就吧自动将全选框选中

                var isTrue = true

                    for(var j=0;j<=button_son.length;j++){

                        //if做判断所有的子选项框中有一个没有选中将isTrue更改false即全选框不会选中

                        if(!button_son[j].checked){

                            isTrue = false

                        }  

                        //把状态赋值给全选框的checked属性用于控制全选框状态

                        button_all.checked = isTrue;

                    }

                }

        }

    </script>