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