Выбор группы чекбоксов

Question

Выбор группы чекбоксов

Рейтинг: 1Ответов: 1Опубликовано: 24.04.2023

Есть 20 групп с одним главным чекбоксом и по 4 дополнительных чекбокса. Как сделать при выборе главного чекбокса чтобы выбирались остальные 4 чекбокса? Нашел выбор по ID, но для каждой группы повторять код 20 раз много текста получится. Как написать через цикл? В примере написал только одну группу. Таких групп 20 и больше будет.

$('#checkbox').click(function(){
    if ($(this).is(':checked')){
        $('#controls input:checkbox').prop('checked', true);
    } else {
        $('#controls input:checkbox').prop('checked', false);
    }
});

<p id="controls">
    <input type="checkbox">checkbox 1
    <input type="checkbox">checkbox 2
    <input type="checkbox">checkbox 3
  <input type="checkbox">checkbox 4
</p>
 
<input type="checkbox" id="checkbox"> Отметить/снять все

И как сделать то же самое для checkbox в таблице?

<tr>
  <td>
    <input type='checkbox' class="checkbox_all">
  </td>
  <td>
    <input type='checkbox'>
  </td>
  <td>
    <input type='checkbox'>
  </td>
  <td>
    <input type='checkbox'>
  </td>
  <td>
    <input type='checkbox'>
  </td>
</tr>

спасибо работает! если чекбоксы в таблице:

<tr>
       <td>
          <input type='checkbox' class="checkbox_all">
       </td>
       <td>
          <input type='checkbox'>
       </td>
       <td>
          <input type='checkbox'>
       </td>
       <td>
          <input type='checkbox'>
       </td>
       <td>
          <input type='checkbox'>
       </td>
</tr>

то как надо изменить jquery скрипт?

javascript html jquery

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Не нужно никаких циклов - jQuery может оперировать непосредственно коллекциями:

$('.checkbox_all').click(function() {
  $(this).prev('.controls').find('input:checkbox').prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="controls">
  <input type="checkbox">checkbox 1
  <input type="checkbox">checkbox 2
  <input type="checkbox">checkbox 3
  <input type="checkbox">checkbox 4
</p>
<input type="checkbox" class="checkbox_all"> Отметить/снять все
<hr>
<p class="controls">
  <input type="checkbox">checkbox 1
  <input type="checkbox">checkbox 2
  <input type="checkbox">checkbox 3
  <input type="checkbox">checkbox 4
</p>
<input type="checkbox" class="checkbox_all"> Отметить/снять все

если чекбоксы в таблице ... то как надо изменить jquery скрипт?

$('.checkbox_all').click(function() {
  $(this).closest('tr').find('input:checkbox').prop('checked', $(this).is(':checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type='checkbox' class="checkbox_all">Отметить/снять все</td>
    <td><input type="checkbox">checkbox 1</td>
    <td><input type="checkbox">checkbox 2</td>
    <td><input type='checkbox'>checkbox 3</td>
    <td><input type='checkbox'>checkbox 4</td>
  </tr>
  <tr>
    <td><input type='checkbox' class="checkbox_all">Отметить/снять все</td>
    <td><input type="checkbox">checkbox 1</td>
    <td><input type="checkbox">checkbox 2</td>
    <td><input type='checkbox'>checkbox 3</td>
    <td><input type='checkbox'>checkbox 4</td>
  </tr>
<table>

Выбор группы чекбоксов

Ответы