проверить все td уже созданной таблицы

Question

У меня есть флажок для каждого td, и когда я проверяю верхний td, все остальные флажки в первом столбце td должны быть отмечены. То же со вторым, третьим и так далее. Я пробовал это, но это не работает.

$('#chkListF').click(function() {
  $(this).closest('tr').find(".chkListSelect").prop('checked', this.checked);
});

То же, что и на картинке, когда я проверяю сначала все td следует проверить.

введите описание изображения здесь

Answer 1

Для достижения того, что вам нужно, вы можете использовать index(), чтобы определить индекс флажка в заголовке, затем использовать селектор :nth-child(), чтобы найти все чекбоксы в столбце, соответствующем этому индексу, и установить их состояние checked для соответствия:

let $table = $('table');
$table.find('thead :checkbox').change(e => {
  var chkIndex = $(e.target).parent('td').index() + 1;
  $table.find('tbody tr td:nth-child(' + chkIndex + ') :checkbox').prop('checked', e.target.checked);
});

table { border-collapse: collapse; }
thead { background-color: #DDD; }
td { padding: 10px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
    </tr>
    <tr>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
      <td><input type="checkbox" /></td>
    </tr>
  </tbody>
</table>