| vue双向绑定checked属性&&JavaScript原生实现全选反选功能 | 您所在的位置：网站首页 › js原生实现双向数据绑定 › vue双向绑定checked属性&&JavaScript原生实现全选反选功能 |
vue双向绑定checked属性&&JavaScript原生实现全选反选功能
|
功能要求： 1、点击全选，其他相关的复选框都会被选中 2、取消全选，相关复选框都变成不选中 3、所有相关复选框都被选中后，全选框被选中 4、只要有一个相关复选框没有被选中，全选框就不被选中 一、vue双向绑定checked属性实现 思路：通过v-model与data中的数据进行双向绑定；当设置全选框状态时通过计算属性isAll的set方法给相关子复选框设置为相同的状态；获取全选框状态时调用get方法根据子复选框的状态进行返回。 全选 苹果 香蕉 梨 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; } } } })
二、JavaScript实现全选和反选 全选 苹果 柿子 桃子 西瓜 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; }) })
|
【本文地址】
公司简介
联系我们