Question 50230 in Javascript Question posted in
A very good W3school tutorial can be found here.

check all checkbox by class name – Javascript

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

Tags:

3

Answers


  1. 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?

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search