JavaScript中用按键的方式来实现复选框全选或全取消的操作

设置一个按键用来控制复选框的全选和全部取消功能并变换按键中的字样，其中在所有复选框全选(按键为取消选中)的状态下，点击取消选中任意一个复选款使按键的字体变换为全选。

HTML:

    <input type="checkbox">足球
    <input type="checkbox">蓝球
    <input type="checkbox">排球
    <button type="button">全选</button>

JavaScript：

        //获取元素，获取复选框和按键的元素
        let inp = document.querySelectorAll('input');
        let but = document.querySelector('button');
        //设置一个变量用来控制按键是否选中
        let flag = true;
        //设置按键的点击事件
        but.onclick = function(){
            //获取所有复选框
            for(let i of inp){
                //设置复选框中checked的值
                i.checked=flag;
            }
            //变量取反使下一次按键的点击事件能正常进行
            flag=!flag;
            //设置按键中的文本
            but.innerHTML=(flag?'全选':'取消选中');//f
        }
        //获取所有复选框
        for(let n of inp){
            //设置复选框的点击事件
            n.onclick = function(){
                // 设置一个变量来控制复选框是否全部选中
                let flag1 = true;
                //获取所有复选框
                for(let j of inp){
                    //判断是否有复选框未选中
                    if(!j.checked){
                        //如果有复选框未选中就然flag1的值为false
                        flag1 = false;
                    }
                }
                //设置按键中的文本
                but.innerHTML=(flag1?'取消选中':'全选');
                //使按键的变量值与复选框变量的值相同(按键:flag;复选框:flag1;)
                flag=!flag1;
            }
        }

全选状态下:

有复选款选中的状态下:

 全部取消的状态下: