check all checkbox by class name

I´m trying to check and unchex all check boxes with javascript and 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;
}
}
}
}

This function it´s called from my principal checkbox:

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

i want to do, that when i click in this check box check all my child checkboxes and if it´s checked and uncheck this check box, unchecked all. i tryed with event.

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

but not show anything in console and not checked my inputs...

UPDATE

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

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

Thanks for readme and sorry for my bad english

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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelector('.main_checkbox').addEventListener("change",function(){
let isChecked=this.checked;
document.querySelectorAll("input[type='checkbox'].assign_register").forEach((chk)=>{
chk.checked=isChecked;
})
})

<!-- language: lang-html -->

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

<!-- end snippet -->

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

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?