lundi 17 avril 2023

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




Aucun commentaire:

Enregistrer un commentaire