我试图用javascript和vue检查和取消检查所有复选框。
const checkAll = () => {
var array = document.getElementsByClassName("assign_register");
for(var i = 0; i < array.length; i++){
if(array[i].type == "checkbox"){
if(array[i].className == "assign_register"){
array[i].checked = true;
}else if(array[i].checked){
array[i].checked = false;
}
}
}
}
这个函数是从我的主要复选框调用的:
<template v-for="item in valor" :key="item.id">
<tr>
<td><input type="checkbox" class="assign_register" name="assign_register" style="width: 20px; height: 20px;"></td>
我想做的是,当我点击这个复选框检查所有我的孩子复选框,如果它的选中和取消选中这个复选框,取消选中所有.
const checkAll = () => {
var array = document.getElementsByClassName("assign_register");
for(var i = 0; i < array.length; i++){
array[i].addEventListener('change', e => {
if(e.target.checked === true) {
console.log("Checkbox is checked - boolean value: ", e.target.checked)
}
if(e.target.checked === false) {
console.log("Checkbox is not checked - boolean value: ", e.target.checked)
}
});
}
}
但在控制台中没有显示任何内容,也没有检查我的输入...
更新
const checkAll = () => {
var array = document.getElementsByClassName("assign_register");
for(var i = 0; i < array.length; i++){
if(array[i].type == "checkbox"){
if(array[i].className == "assign_register"){
array[i].checked = true;
if(array[i].checked == true){
array[i].checked = false;
}
}
}
}
}
更新2
<td><input type="checkbox" class="assign_register" name="assign_register" v-model="checked" style="width: 20px; height: 20px;"></td>
const checkAll = () => {
return {
checked: true
}
}
谢谢你的readme,为我糟糕的英语感到抱歉
3条答案
按热度按时间kq4fsx7k1#
我不太理解你的问题,但是如果我假设你想在改变父元素的状态时添加父元素,你想让所有的子元素都有相同的状态
hlswsv352#
为每个
valor
项创建一个字段,如item.checked
,并将其放入v-model
中,如下所示顺便说一句,无论如何都要避免在vue.js中使用vanilla.js选项,这是这种框架存在的最基本原因。
在前端处理表单时,我们经常需要将表单输入元素的状态与JavaScript中相应的状态同步
mefy6pfw3#
看起来它从来没有进入else if块,因为if总是true,因为你只得到具有那个className的元素。