Блог

Главная - Вопросы по программированию - Jquery, получающий отмеченные элементы, возвращает непроверенные поля?

Jquery, получающий отмеченные элементы, возвращает непроверенные поля?

#javascript #jquery

#javascript #jquery

Вопрос:

Это сводило меня с ума в течение нескольких часов. Я пытаюсь получить массив со значениями всех «отмеченных» флажков, когда выбрано «Все». По какой-то причине на моем сайте, когда я проверяю «Все», он возвращает пустой набор, но когда я снимаю его, возвращаются правильные значения.

Самая сумасшедшая часть заключается в том, что я создал CodePen с урезанным кодом, и он работает так, как ожидалось, и я не могу понять, что отличается от моего сайта.

Флажок установлен над состояниями, в которых указано «Все» здесь: 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>

Комментарии:

1. в этом фрагменте он работает так, как ожидалось

2. Похоже, ваш вопрос полностью касается попытки отладки — когда я проверяю «Все», он возвращает пустой набор — где [это] ваш console.log? Поскольку ваши флажки работают нормально на вашем сайте.

3. Проблема в том, что $('.state_sub_checkbox:checked') выполняется до того, как они были проверены, поэтому является пустым массивом. Откройте инструменты браузера (F12) — ctrl-shift-f для поиска в источниках — найдите search.push — добавить точку останова (нажмите на строку) — наблюдайте, что происходит в пользовательском интерфейсе / источниках, когда вы нажимаете галочку «все». отредактируйте свой фрагмент debugger; в обработчике события click

4. можете ли вы попробовать так ? Я объединил оба обработчика в один.

5. Сделайте то, что вы сделали в своей скрипке — поместите их оба в один и тот же обработчик событий

Ответ №1:

Попробуйте

 $('#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)
})

Комментарии:

1. Спасибо! Проблема заключалась в том, что на моем сайте у меня была функция проверки флажков после проверки функции, были ли они отмечены. Когда я копировал в codepen, я изменил порядок.

Метки: