JavaScript 控制checkbox全选与全不选

1、简单定义CheckBox：

<form name="frm">
    <p>
        <label><input type="checkbox" name="selFruit" onclick="selAll(this)"/>水果:</label>
                <input type="checkbox" name="fruit" value="apple">苹果
                <input type="checkbox" name="fruit" value="banana">香蕉
                <input type="checkbox" name="fruit" value="orange">橘子
    </p>
</form>

2、onclick触发的 selAll(obj) 方法：

<script>
    /*
     * 全选与全不选
     * obj 表示使用此函数的当前对象
     */
    function selAll(obj){
        // console.log(obj.checked) //被选择就是true，不被选择就是false
        // console.log(document.frm.selFruit.checked)  //与 console.log(obj.checked) 等价

        //取所有的名字是fruit的元素
        let fruit = document.frm.fruit
        //遍历
        for(let i=0;i<fruit.length;i++){
            //把每一个checkbox的checked属性设置成当前的checkbox的checked的值
            fruit[i].checked = obj.checked
        }
    }

</script>

3、效果图

通过一个键全不选：     

通过一个键全选：

---

根据留言发现问题：点击水果后，取消子选项，水果依然checked为true

修改JavaScript：

<script>
    /*
     * 全选与全不选
     * obj 表示使用此函数的当前对象
     */
    let fruit = document.getElementsByName("fruit");
    let sellFruit = document.getElementsByName("selFruit")[0];

    function selAll(obj) {
        // console.log(obj.checked) //被选择就是true，不被选择就是false
        // console.log(document.frm.selFruit.checked)  //与 console.log(obj.checked) 等价

        //取所有的名字是fruit的元素
        //遍历
        for (let i = 0; i < fruit.length; i++) {
            //把每一个checkbox的checked属性设置成当前的checkbox的checked的值
            fruit[i].checked = obj.checked
        }
    }

    // 为水果多选框分别绑定响应函数
    for (let i = 0; i < fruit.length; i++) {
        fruit[i].onclick = function () {
            sellFruit.checked = true;//将sellFruit默认设为true
            for (let j = 0; j < fruit.length; j++) {
                //判断多选框是否全选，如果没有，则将sellFruit置为不选
                if (!fruit[j].checked) {
                    sellFruit.checked = false;
                    break;
                }
            }
        }
    }

</script>