mercredi 11 septembre 2019

Many checkbox groups and "select all"

I have 8 groups of checkboxes. Each with a "master" and between 8 and 12 sub-checkboxes and try to create a "un/select all" behaviour to each group.

I found this SO https://stackoverflow.com/a/25697142/9098325 but it only shows one group of checkboxes.

<ul>
<li>
    <input type="checkbox" id="out1" class="outer">
    <label for="out1">Checkbox Out 1</label>
</li>
<ul>
    <li>
        <input type="checkbox" id="inner1" class="inner">
        <label for="out1">Checkbox Inner 1</label>
    </li>
    <li>
        <input type="checkbox" id="inner2" class="inner">
        <label for="out1">Checkbox Inner 2</label>
    </li>
    <li>
        <input type="checkbox" id="inner3" class="inner">
        <label for="out1">Checkbox Inner 3</label>
    </li>
</ul>
<li>
    <input type="checkbox" id="out2" class="outer">
    <label for="out1">Checkbox Out 2</label>
</li>
<ul>
    <li>
        <input type="checkbox" id="inner4" class="inner">
        <label for="out1">Checkbox Inner 4</label>
    </li>
    <li>
        <input type="checkbox" id="inner5" class="inner">
        <label for="out1">Checkbox Inner 5</label>
    </li>
</ul>

            $('.outer').on('click',function(){
            if(this.checked){
                $('.inner').each(function(){
                    this.checked = true;
                });
            }else{
                $('.inner').each(function(){
                    this.checked = false;
                });
            }
        });

        $('.inner').on('click',function(){
            if ($(this).is(":checked")) {
                var isAllChecked = 0;

                $(".inner").each(function() {
                    if (!this.checked)
                        isAllChecked = 1;
                });

                if (isAllChecked == 0) {
                    $(".outer").prop("checked", true);
                }
            }
            else {
                $(".outer").prop("checked", false);
            }
    });

I made a fiddle with my not working solution here: https://jsfiddle.net/ex4rnq83/




Aucun commentaire:

Enregistrer un commentaire