Массовый выбор 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

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

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

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

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

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