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