To toggle the checkboxes within a specific section when a link is clicked within that section, I need to ensure the script functions correctly. The checkboxes and the button must be nested within the same parent element. The HTML markup is provided below.
<div class="parent">
<div class="child">
<a class="filter-check-btn">button</a>
<div class="all-checkboxes">
<div class="sep-chk">
<label class="rad">
<input class="filter-chk-box" type="checkbox" checked> Checkbox
</label>
</div>
<div class="sep-chk">
<label class="rad">
<input class="filter-chk-box" type="checkbox" checked> Checkbox
</label>
</div>
</div>
</div>
<div class="child">
<div class="all-checkboxes">
<div class="sep-chk">
<label class="rad">
<input class="filter-chk-box" type="checkbox" checked> Checkbox
</label>
</div>
<div class="sep-chk">
<label class="rad">
<input class="filter-chk-box" type="checkbox" checked> Checkbox
</label>
</div>
<div class="sep-chk">
<label class="rad">
<input class="filter-chk-box" type="checkbox" checked> Checkbox
</label>
</div>
</div>
</div>
</div>
Below is the script:
$(".filter-check-btn").on('click', function() {
$(this).toggleClass('active');
$(this).parent().parent().children(".filter-chk-box").prop('checked', false);
});
$(".filter-check-btn.active").on('click', function() {
$(this).toggleClass('active');
$(this).parent().parent().children(".filter-chk-box").prop('checked', true);
});