Jquery得到选中的项目返回未选中的框?

Question

这已经让我抓狂好几个小时了。我想要得到一个数组包含所有的checkked"复选框，当"全部";被选中。出于某种原因，在我的网站上，当我点击"全部"时，它返回一个空集合，但是当我取消选中它时，返回正确的值。

最疯狂的是，我做了一个CodePen与剥离的代码，它工作如预期，我不知道我的网站有什么不同。

复选框是States上方的那个，上面写着"All"这里: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)
})