jQuery / Javascript: установите все флажки в следующей таблице

Question

Мой оригинальный javascript был:

$(document).ready(function(){
 $("th :checkbox").change(function() {
    $(this).closest("table").find(":checkbox").prop("checked", $(this).is(":checked"));
 });
});

, который был использован при такой настройке:

<div>
<table id="table" width="100%">
<tr>
    <th><input type="checkbox" />Select All</th>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
</tr>
<tr>
    <td><input type="checkbox" /></td>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
</tr>
</table>
</div>

Я немного изменил мои таблицы, и теперь это выглядит примерно так:

<table>
 <tr>
  <th><input type="checkbox" />select all</th>
 </tr>
</table>
<table>
 <tr>
  <td><input type="checkbox" /></td>
 </tr>
 <tr>
  <td><input type="checkbox" /></td>
 </tr>
</table>

Что мне нужно изменить в моем javascript, чтобы при установке флажка в <th> были отмечены все флажки внутри <td> в следующей таблице?

Спасибо.

Относится к этому сообщению.

Answer 1

Добавить .next() к .closest("table"):

$(document).ready(function(){
 $("th :checkbox").change(function() {
    $(this).closest("table").next().find(":checkbox").prop("checked", $(this).is(":checked"));
 });
});

$(this).closest("table") выбирает таблицу соответствия элементов th :checkbox. next() выбирает следующий элемент, который в данном случае является другой таблицей.

Этот код может легко сломаться. Я предлагаю установить идентификатор для другой таблицы и использовать следующий код:

$(document).ready(function(){
 $("th :checkbox").change(function() {
    $("#id-of-table :checkbox").prop("checked", $(this).is(":checked"));
 });
});