[Vuejs]-Check all checkbox by class name

by

2👍

✅

I didn’t understand your question very well, but if I assume you want to add a parent element when changing its state, you want all child elements to have the same state

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>
👤Suhail Keyjani

1👍

Make a field for each valor item like item.checked and put it in v-model like this

BTW avoid using vanilla.js selections in vue.js by any means, this is the most basic reason that such framework exist.

When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript. It can be cumbersome to manually wire up value bindings and change event listeners

👤TheMMSH

0👍

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

It seems like it never goes to else if block because if is always true, as you get only elements with that className. Or am I missing something?

👤Taavi Kivimaa

Leave a comment