表的input[type='checkbox']
框全部绑定到了对应数组的active上,点击上面全选的时候怎么让所有的checkbox的active值变为true/false?
这里是我写的全选的代码,但是这样的话是改变整个列表的内容,如果我加入了筛选filterBy,在筛选框输入内容后列表会改变,但是这时再点击全选依然改变的是所有结果的active,而不是当前筛选出来的结果的active
checkAll:function(){ if ($('#selectAll').is(':checked')) { $("#result tr>td input").prop('checked', true); for(var i in goodsDetail.$data.goodsMsg){ goodsDetail.$data.goodsMsg[i].active = true; } } else { $("#result tr>td input").prop('checked', false); for(var i in goodsDetail.$data.goodsMsg){ goodsDetail.$data.goodsMsg[i].active = false; } } var length = $('input:checkbox[name=checkBox]:checked').length; $(".centerinfo").text("已选中"+length+"条数据"); }
最近的项目需要用到全选,写了一个全选的指令,你可以参考下
export default { 'check-all': { twoWay: true, params: ['checkData'], bind() { /** * 如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */ this.vm.$watch(this.params.checkData, (checkData) => { if (checkData.every((item) => item.checked)) { this.set(true); } else { this.set(false); } }, { deep: true }); }, update(checkAll) { /** * 如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */ if (checkAll) { this.vm[this.params.checkData].forEach((item) => { item.checked = true; }); } else { this.vm[this.params.checkData].forEach((item) => { item.checked = false; }); } }, }, };
调用
<input type="checkbox" v-model="checkAll" v-check-all="checkAll" check-data="checkData"> <ul> <li v-for="item in checkData"> <input type="checkbox" v-model="item.checked"> {{item.text}} </li> </ul>
知乎上也有类似的问题,也有其他解决方案,你可以参考下:
https://www.zhihu.com/questio...
每一行都设置v-bind:class="{'active': isChecked}",全选时再去循环每行的isChecked设置成true
给每个item一个isChecked
的布尔值来表示当前选项是否被选中,checkAll
去操作数据的这个属性就可以了。
为什么你会这么使用vue
?你不应该去操作dom
而应该去操作数据。你应该去修改数据里的选中状态而不是去手动的修改dom
的实际选中状态。