JQuery / Javascript: установите все флажки, но только в пределах определенной таблицы

Question

Просто нужна небольшая помощь здесь. Для начала вот как выглядит мой HTML:

<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>

На одной странице есть еще 5 подобных таблиц, и я собираюсь сделать так, чтобы при установке флажка <th> на определенной таблице устанавливались только флажки <td> в этой таблице. Любая помощь в том, как это будет сделано, будет принята с благодарностью.

Answer 1

Вы можете связать обработчик событий change со всеми флажками, которые являются потомками элемента th, а затем установить флажки со всеми флажками, которые являются потомками ближайшего table:

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

Вот рабочий пример с 2 таблицами. Если вы хотите, чтобы флажок в th также снимал все остальные флажки, то вы можете сделать это, используя второй аргумент prop (спасибо @SalmanA):

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

Answer 2

$('#table input:checkbox').prop('checked', true);

Чтобы связать это событие для каждого флажка в тегах th (как в ответе Джеймса Аллардика)

$('th :checkbox').change(function() {
    $(':checkbox', $(this).closest('table')).prop('checked', true);
});

Answer 3

Используйте приведенный ниже jquery

$('input[Type="checkbox"]', $('#tableID')).prop("checked", true);