功能要求：
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>
如果觉得《vue双向绑定checked属性JavaScript原生实现全选反选功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
