javascript 按类名选中所有复选框

xvw2m8pv  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(181)

我试图用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,为我糟糕的英语感到抱歉

kq4fsx7k

kq4fsx7k1#

我不太理解你的问题,但是如果我假设你想在改变父元素的状态时添加父元素,你想让所有的子元素都有相同的状态

document.querySelector('.main_checkbox').addEventListener("change",function(){
    let isChecked=this.checked;
    document.querySelectorAll("input[type='checkbox'].assign_register").forEach((chk)=>{
             chk.checked=isChecked;
    })
})
<div>
  Main Check Box:<input type="checkbox" class="main_checkbox" /> Change Me To Change All Other CheckBoxes<br/>
<hr/>
  Child 1:<input type="checkbox" class="assign_register" /> <br/>
Child 2:<input type="checkbox" class="assign_register" /> <br/>
Child 3:<input type="checkbox" class="assign_register" /> <br/>
Child 4:<input type="checkbox" checked class="assign_register" /> <br/>
</div>
hlswsv35

hlswsv352#

为每个valor项创建一个字段,如item.checked,并将其放入v-model中,如下所示
顺便说一句,无论如何都要避免在vue.js中使用vanilla.js选项,这是这种框架存在的最基本原因。
在前端处理表单时,我们经常需要将表单输入元素的状态与JavaScript中相应的状态同步

mefy6pfw

mefy6pfw3#

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;
            }
        }
        
    }
}

看起来它从来没有进入else if块,因为if总是true,因为你只得到具有那个className的元素。

相关问题