Установите все флажки в разделе tbody не работает

ProgramBox

Установите все флажки в разделе tbody не работает

Post author:admin
Запись опубликована:1 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #checkbox #html-table

#javascript #jquery #HTML #флажок #html-таблица

Вопрос:

Я не уверен, почему этот jquery не работает. То, что я хочу, довольно просто: установить все флажки в регионе. Может кто-нибудь помочь объяснить, почему это не работает?

 $(function(){
  $('.select_all').change(function() {
    var checkthis = $(this);
    var checkboxes = $(this).next('tbody').find('.region_ct');
    if(checkthis.is(':checked')) {
      checkboxes.attr('checked', true);
    } else {
      checkboxes.attr('checked', false);  }
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <th colspan=2>Americas</th>
  </tr>
  <tr>
    <td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
  </tr>
  <tbody>
    <tr>
      <td><input type="checkbox" class="region_ct" value="X"  /> Argentina</td>
      <td class="center"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="region_ct" value="X"  /> Barbados</td>
      <td class="center"></td>
    </tr>
  </tbody>
  <tr>
    <th colspan=2>Asia</th>
  </tr>
  ...
</table>

Ответ №1:

Там есть несколько проблем:

Я бы настоятельно рекомендовал не смешивать tr и tbody элементы. Если вы собираетесь использовать tbody (и вы должны), используйте его последовательно. Браузеры могут перемещать tr элементы в сгенерированные tbody элементы.
У элемента, к которому вы обращаетесь next , нет следующего родственного элемента (вообще, а тем более того, который вы ищете). Вы должны пройти вверх по иерархии до tr (если вы не исправите # 1) или tbody (если исправите).
Вы не используете attr для установки checked , вы используете prop ; и вы можете использовать свое существующее checked логическое значение, а не if/else , предоставление просто checkboxes.prop("checked", this.checked);

Пример с обновленными tbody s, и я добавил несколько стран в области Азии, чтобы продемонстрировать, что установлены только соответствующие флажки:

 $(function() {
  $('.select_all').change(function() {
    var checkthis = $(this);
    var checkboxes = $(this).closest('tbody').next().find('.region_ct');
    checkboxes.prop("checked", this.checked);
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <th colspan=2>Americas</th>
    </tr>

    <tr>
      <td colspan=2>
        <input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />Argentina</td>
      <td class="center"></td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />Barbados</td>
      <td class="center"></td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <th colspan=2>Asia</th>
    </tr>
    <tr>
      <td colspan=2>
        <input type="checkbox" name="region_am_all" class="select_all" value="X" />Select All</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />China</td>
      <td class="center"></td>
    </tr>

    <tr>
      <td>
        <input type="checkbox" class="region_ct" value="X" />Vietnam</td>
      <td class="center"></td>
    </tr>
  </tbody>
</table>

Вы также можете подумать о том, чтобы поместить select_all внутри то же tbody самое с флажками, чтобы вы могли покончить с next .

Ответ №2:

tbody не является sibing of .select_all . Вам нужно использовать .closest() для выбора родительского элемента .select_all и использовать .find() для выбора .region_ct в нем. Также вам не нужно использовать if/else check/uncheck флажок to. Установите this.checked значение checked только для атрибута checkbox using .prop() .

 $('.select_all').change(function() {
    $(this).closest('table').find('.region_ct').prop('checked', this.checked);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tr>
    <th colspan=2>Americas</th>
  </tr>
  <tr>
    <td colspan=2><input type="checkbox" name="region_am_all" class="select_all" value="X" /> Select All</td>
  </tr>
  <tbody>
    <tr>
      <td><input type="checkbox" class="region_ct" value="X"  /> Argentina</td>
      <td class="center"></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="region_ct" value="X"  /> Barbados</td>
      <td class="center"></td>
    </tr>
  </tbody>
  <tr>
    <th colspan=2>Asia</th>
  </tr>
</table>