vue双向绑定checked属性&&JavaScript原生实现全选反选功能

功能要求：
1、点击全选，其他相关的复选框都会被选中
2、取消全选，相关复选框都变成不选中
3、所有相关复选框都被选中后，全选框被选中
4、只要有一个相关复选框没有被选中，全选框就不被选中

一、vue双向绑定checked属性实现
思路：通过v-model与data中的数据进行双向绑定；当设置全选框状态时通过计算属性isAll的set方法给相关子复选框设置为相同的状态；获取全选框状态时调用get方法根据子复选框的状态进行返回。

<div id="app">
        <input type="checkbox" class="check-all" v-model="isAll">全选
        <input type="checkbox" class="check-item" v-model="apple">苹果
        <input type="checkbox" class="check-item" v-model="banana">香蕉
        <input type="checkbox" class="check-item" v-model="pear">梨
    </div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                apple: false,
                banana: false,
                pear: false
            }
        },
        computed: {
            isAll: {
                set(val) {
                //设置全选框状态时同时将相关复选框设置为相同状态
                    this.apple = val;
                    this.banana = val;
                    this.pear = val;
                },
                get() {
                    return this.apple && this.banana && this.pear;
                }
            }
        }
    })
</script>

二、JavaScript实现全选和反选

<div class="app">
	<input type="checkbox" class="all">全选
	<input type="checkbox" class="ck">苹果
	<input type="checkbox" class="ck">柿子
	<input type="checkbox" class="ck">桃子
	<input type="checkbox" class="ck">西瓜
</div>
<script>
let all = document.querySelector(".all");
let ck = document.querySelectorAll(".ck");
//给全选框添加点击事件，并将相关复选框的状态设置为与全选框的状态相同
all.addEventListener('click', function() {
    ck.forEach(item => {
        item.checked = all.checked;
    })
})
//给每个子复选框添加点击事件
ck.forEach(item => {
    item.addEventListener('click', function() {
        let num = document.querySelectorAll('.ck:checked').length;
        //判断子复选框选中的个数与子复选框的个数是否相等
        all.checked = num == ck.length ? true : false;
    })
})
</script>