Jquery getting checked items returns unchecked boxes?

Question

This has been driving me crazy for hours. I'm trying to get an array with the values of all "checked" checkboxes when "All" is selected. For some reason, on my site, when I check "All" it returns an empty set, but when I uncheck it the correct values are returned.

The craziest part is that I made a CodePen with the stripped down code and it works as expected, and I can't figure out what is different about my site.

The checkbox is the one above the States that says "All" here: https://dev.vmc.w3.uvm.edu/xana/climateIndicators/table

 //check all state checkboxes $('#all_states').click(function() { checkCheckboxes(this.id, 'all_states__checkboxes'); }); function checkCheckboxes(id, pID) { $('#' + pID).find(':checkbox').each(function() { jQuery(this).prop('checked', $('#' + id).is(':checked')); }); } //state filter $('.state_checkbox').on('click', function() { var search = []; $('.state_sub_checkbox:checked').each(function() { var group = $(this).val(); search.push(group.trim()); }); console.log(search); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> My HTML code: ``` <div class="px-3 py-3"> <form> <div class="form-group form-check mb-2"> <input type="checkbox" class="form-check-input state_checkbox" id="all_states"> <label class="form-check-label" for="All">All</label> </div> <div class="row pl-3" id="all_states__checkboxes"> <div class="col-lg"> <div class="form-group form-check mb-0"> <input type="checkbox" class="form-check-input state_sub_checkbox" value="CT" id="Connecticut"> <label class="form-check-label" for="Connecticut">Connecticut</label> </div> <div class="form-group form-check mb-0"> <input type="checkbox" class="form-check-input state_sub_checkbox" value="ME" id="Maine"> <label class="form-check-label" for="Maine">Maine</label> </div> <div class="form-group form-check mb-0"> <input type="checkbox" class="form-check-input state_sub_checkbox" value="MA" id="Massachussetts"> <label class="form-check-label" for="Massachussetts">Massachussetts</label> </div> </div> <div class="col-lg"> <div class="form-group form-check mb-0"> <input type="checkbox" class="form-check-input state_sub_checkbox" value="NH" id="NewHampshire"> <label class="form-check-label" for="NewHampshire">New Hampshire</label> </div> <div class="form-group form-check mb-0"> <input type="checkbox" class="form-check-input state_sub_checkbox" value="NY" id="NewYork"> <label class="form-check-label" for="NewYork">New York</label> </div> <div class="form-group form-check mb-0"> <input type="checkbox" class="form-check-input state_sub_checkbox" value="VT" id="NewYork"> <label class="form-check-label" for="Vermont">Vermont</label> </div> </div> </div> </form> </div>

Answer 1

Try

$('#all_states__checkboxes').on('click', function() {
  const all= $('[type=checkbox]',this).length
  const checked = $('[type=checkbox]:checked',this).length
  $('#all_states').prop('checked', all===checked);
});
$('#all_states').on('click',function() {
  $('#all_states__checkboxes [type=checkbox]').attr('checked',this.checked)
})