Массовый выбор CheckBox

@xunicorn · Регистрация: 22.11.2011

Студворк — интернет-сервис помощи студентам

Здравствуйте. Есть такая проблема. Задача - сделать массовый выбор чекбоксов при нажатии на одном.
Такой обработчик события:

JavaScript
1
2
3
4
5
6
7
8
  if(!$(chbx).is(":checked"))
  {
    $(".checkbox").attr("checked", false);
  }
  else
  {
    $(".checkbox").attr("checked", true);
  }

При первом нажатии оно выделает все, при втором - убирает выбор чекбоксов. Но при третьем и тд визуально галка не ставится на чекбоксе, хотя в атрибутах и показывает "checked".

В чем ошибка обработчика ?

@Vlad_IT · 31.07.2013, 18:12

Можно попробовать так

JavaScript
1
2
3
4
5
6
7
8
if(!$(chbx).is(":checked"))
  {
    $(".checkbox").each(function() { this.checked = false; });
  }
  else
  {
    $(".checkbox").each(function() { this.checked = true; });
  }

Добавлено через 4 минуты
Кстати, похоже у Вас ошибка в логике кода.
если чекед

JavaScript
1
2
3
4
5
6
7
8
if(!$(chbx).is(":checked")) // Если чекед отключен
  {
    $(".checkbox").attr("checked", false); // Тогда отключить его
  }
  else // Иначе
  {
    $(".checkbox").attr("checked", true); // Включить
  }

Попробуйте так

JavaScript
1
2
3
4
5
6
7
8
if($(chbx).is(":checked"))
  {
    $(".checkbox").attr("checked", false);
  }
  else // Иначе
  {
    $(".checkbox").attr("checked", true);
  }

@xunicorn · 31.07.2013, 19:23 **[ТС]**

Vlad_IT

кстати это полный бред

мой вариант

JavaScript
1
2
3
4
5
6
7
8
if(!$(chbx).is(":checked")) // Если чекед отключен
  {
    $(".checkbox").attr("checked", false); // Тогда отключить его //(все элементы с классом .checkbox)
  }
  else // Иначе //(если чекбокс включен)
  {
    $(".checkbox").attr("checked", true); // Включить //(включить все елементы с классом checkbox)
  }

но сути проблемы это не меняет - все равно не работает

@Vlad_IT · 31.07.2013, 20:13

Тогда вот

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
    <title></title>
</head>
<body>
    <input type="checkbox" id="main_check" />
 
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
 
    <script type="text/javascript">
 
        jQuery('#main_check').click(function()
        {
            if(jQuery(this).is(':checked'))
                jQuery('.checkbox'). prop('checked', true);
            else jQuery('.checkbox').prop('checked', false);
        });
    </script>
</body>
</html>

@xunicorn · 31.07.2013, 20:53 **[ТС]**

спасибо за ответ, воспользовался вашим алгоритмом и все работает. Не пойму, почему мой алгоритм не хочет работать

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://yandex.st/jquery/2.0.3/jquery.min.js"></script>
    <title></title>
    <script>
      
    </script>
</head>
<body>
    <input type="checkbox" id="main_check" onclick="checkAllChbx(this)"/>Main
 <div style="border: 1px solid black">
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
    <input type="checkbox" id="main_check" class="checkbox"/>
 </div>
    <script type="text/javascript">
 
      function checkAllChbx(chbx)
      {  
        if($(chbx).is(":checked"))
        {
          $(".checkbox").each(function(){$(this).attr("checked", true);});
        }
        else
        {
          $(".checkbox").each(function(){$(this).attr("checked", false);});
        }
      }
 /*
        $('#main_check').click(function()
        {
            if(jQuery(this).is(':checked'))
                jQuery('.checkbox'). prop('checked', true);
            else jQuery('.checkbox').prop('checked', false);
        });
*/   
    </script>
</body>
</html>

@axle_vega · 21.04.2015, 14:32

День добрый! Пришлось поднять старую тему, дабы не плодить новых.

В общем-то код, который предложил Vlad_IT, корректно работает, в отличие от того, что нашел в сети. Но возникла необходимость его доделать.
Нужно сделать так, чтобы при отключении хотя бы одного чекбокса, главный тоже отключался.

Дело в том, что у меня есть двухуровневый каталог товаров, и, соответственно, поиск по нему. Если не отключить общий чекбокс - то нет никакого толку от того, что дочерние чекбоксы неактивны. Поиск всё равно будет производиться по всему каталогу, а не по выделенным разделам.

Надеюсь, правильно объяснил.

Подскажите, что нужно дописать?

@Lazy_Den · 21.04.2015, 14:56

Не по теме:

axle_vega, лучше было бы создать новую тему, т.к. ваш вопрос может и имеет схожесть с этим, но всё-таки отличается по смыслу. Ну и хорошо бы показывать структуру HTML

Вот пример реализации.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
    <li><input type="checkbox" class="main_check" />
        <ul>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
        </ul>
    </li>
    <li><input type="checkbox" class="main_check" />
        <ul>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
            <li><input type="checkbox" class="checkbox" /></li>
        </ul>
    </li>
</ul>

JavaScript
1
2
3
4
5
6
7
8
9
10
$('.main_check').on('change',function () {
    var $that = $(this);
    $that.next('ul').find(':checkbox').prop('checked', $that.prop('checked'));
});
$('.checkbox').on('change', function(){
    var $that = $(this),
        ul = $that.closest('ul'),
        main = ul.prev('.main_check');
    main.prop('checked', $(':checkbox',ul).length == $(':checkbox:checked',ul).length);
});

Сообщение от axle_vega

код, который предложил Vlad_IT, корректно работает

И при всём этом, такой ответ заслуживает минус (жирный). Почему? Потому, что допущена грубая ошибка. "В пределах одной страницы, не может быть два и более элемента с одинаковым id". И это даже не обсуждается. Во-вторых, событие, для таких случаев, желательно устанавливать "change", а не "click".

@axle_vega · 21.04.2015, 15:01

Сообщение от Lazy_Den

Вот пример реализации.

Спасибо! Работает точно так, как мне нужно! Жирный плюс за оперативный ответ

В следующий раз постараюсь точно и правильно оформить вопрос )

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@axle_vega 0 / 0 / 1 Регистрация: 15.01.2014 Сообщений: 32
	21.04.2015, 14:32
	День добрый! Пришлось поднять старую тему, дабы не плодить новых. В общем-то код, который предложил Vlad_IT, корректно работает, в отличие от того, что нашел в сети. Но возникла необходимость его доделать. Нужно сделать так, чтобы при отключении хотя бы одного чекбокса, главный тоже отключался. Дело в том, что у меня есть двухуровневый каталог товаров, и, соответственно, поиск по нему. Если не отключить общий чекбокс - то нет никакого толку от того, что дочерние чекбоксы неактивны. Поиск всё равно будет производиться по всему каталогу, а не по выделенным разделам. Надеюсь, правильно объяснил. Подскажите, что нужно дописать? 0