mercredi 12 décembre 2018

Un-Check and Check All for multiple sets of checkbuttons in JavaScript

I have two different sets of checkboxes.

// "Broker" Checkboxes
    <label class="container" >Select All
                        <input type="checkbox" id="select-all" checked >
                        <span class="checkmark"></span>
                </label>
                <label class="container" >Avisons
                        <input type="checkbox" id="AvisonCheckbox" checked >
                        <span class="checkmark"></span>
                </label>
                <label class="container" >CBRE
                        <input type="checkbox" id="CBRECheckbox" checked >
                        <span class="checkmark"></span>
                </label>


//"Tenant" Checkboxes
<div class="tenantSelectAll" >Select All
                    <input type="checkbox" id="tenantSelect-all"  checked/>
                    <label  for="tenantSelect-all"></label>
                </div>

                <div class="round" style="margin-right:30px">WeWork
                    <input type="checkbox" id="WeWorkCheckbox"  checked/>
                    <label  for="WeWorkCheckbox"></label>
                </div>

                <div class="Regus" style="margin-right:30px; margin-top:13px">Regus
                    <input type="checkbox" id="RegusCheckbox"  checked/>
                    <label  for="RegusCheckbox"></label>
                </div>

The issue is that I'm trying to implement select all/un-select all checkbox for each checkbox set listed above. The following code, works, but it selects/de-selects both "Broker" AND "Tenant" checkboxes. I want the Select All checkbox from the "Broker" checkboxes to only select/de-select from the "Broker" checkboxes, and have the same be true for the "Tenant" checkboxes.

//Implement Select All and Unselect all checkboxes
$('#select-all').click(function(event) {   
if(this.checked) {
    // Iterate each checkbox
    $(':checkbox').each(function() {
        this.checked = true;                        
    });
} else {
    $(':checkbox').each(function() {
        this.checked = false;                       
    });
}
});

Any advice appreciated. Thanks.




Aucun commentaire:

Enregistrer un commentaire