Выделение всех элементов checkbox с помощью jQuery



Для работы скрипта нам понадобится jQuery, скачать последнюю версию можно отсюда.

В готовом виде все будет выглядеть вот так:


Для начала зададим чекбоксы и 2 ссылки.

<div id="group1">
	<input type="checkbox" name="numbers[]" value="1" />
	<input type="checkbox" name="numbers[]" value="2" />
	<input type="checkbox" name="numbers[]" value="3" />
	<input type="checkbox" name="numbers[]" value="4" />
	<input type="checkbox" name="numbers[]" value="5" />
	<input type="checkbox" name="numbers[]" value="6" />
	<input type="checkbox" name="numbers[]" value="7" />
	<input type="checkbox" name="numbers[]" value="8" />
	<input type="checkbox" name="numbers[]" value="9" />
	<input type="checkbox" name="numbers[]" value="10" />
</div>

Выбрать: <a rel="group1" href="#select_all">Все</a>, <a rel="group1" href="#select_none">Ни одного</a>

Как вы наверное заметили, у ссылок есть атрибут rel=»group1″. Этот атрибут должен, быть точно таким же, как и id дива. Вместо div можно использовать и другие элементы. Например, p, ul, fieldlist и т. д.

Теперь, возьмемся за написание кода, отвечающего за выбор чекбоксов.

<script type="text/javascript">
    $(document).ready( function() {
        // Выбор всех
        //При клике на ссылку "Все", активируем checkbox
        $("a[href='#select_all']").click( function() {
           $("#" + $(this).attr('rel') + " input:checkbox:enabled").attr('checked', true);
            return false;
        });
       
        // Ни одного
        $("a[href='#select_none']").click( function() {
             $("#" + $(this).attr('rel') + " input:checkbox").attr('checked', false);
            return false;
        });
    });
</script>

UPD По просьбе комментатора с ником Alexey, привожу пример выделения всех чекбоксов, с помощью 1-гообщего.

<script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready( function() {
	   $("#maincheck").click( function() {
			if($('#maincheck').attr('checked')){
				$('.mc').attr('checked', true);
			} else {
				$('.mc').attr('checked', false);
			}
	   });
    });
</script>
<input type="checkbox" name="numbers[]" class="mc" value="0" />
<input type="checkbox" name="numbers[]" class="mc" value="1" />
<input type="checkbox" name="numbers[]" class="mc" value="2" />
<input type="checkbox" name="numbers[]" class="mc" value="3" />
<input type="checkbox" name="numbers[]" class="mc" value="4" />
<input type="checkbox" name="numbers[]" class="mc" value="5" />
<input type="checkbox" name="numbers[]" class="mc" value="6" />
<input type="checkbox" name="numbers[]" class="mc" value="7" />
<input type="checkbox" name="numbers[]" class="mc" value="8" />
<input type="checkbox" name="numbers[]" class="mc" value="9" />

<br /><input type="checkbox" name="maincheck" id="maincheck"/>


Теги: ,

Комментарии

  1. нужно добавить фильтрацию, когда чекбокс «disabled»

    Reply

  2. 2 sash
    Причем здесь “disabled”, у меня в скрипте это параметр не используется.

    Reply

  3. при том, что когда имеем группу чекбоксов, в которой 1-2 отключены (disabled), то данный скрипт отмечает все равно все

    здесь _http://www.simplecoding.org/pereklyuchenie-chekboksov-s-pomoshhyu-jquery.html это учитывается (в комментах), но работает сам алгоритм чуть не так, он делает инвертирование (отмечено/не отмечено)

    Reply

  4. >>данный скрипт отмечает все равно все
    Уверен?
    Проверь, какие данные будут передаваться. Ты путаешь параметр disabled и checked = false

    Reply

  5. уверен, был список 20 чекбоксов, все кроме одного были «disabled»

    при клике «отметить все» действительно отмечались вообще все )) а должен был отметиться только один

    Reply

  6. Хм.. да действительно disabled чекбоксы тоже будут выделяться. Не учел я этого. При написании скрипта брал в пример интерфейс gmail. Молодец, что нашел такой баг)))

    Reply

  7. объединил обе части в один файл — не пашет 🙁

    Reply

  8. блин — забыл саму jquery подрубить 🙂 — всё пашет — супер

    Reply

  9. А как сделать чтобы не на ссылки нажимать (Все, Ни одного), а сделать общий checkbox (как на mail.ru) Нажал на него — все выделились, еще нажал — ни одного (т.е. все включать и выключать одним checkbox-ом)? А то я в jQuery не очень понимаю.

    Reply

  10. 2 Alexey
    Я обновил пост.

    Reply

  11. Короче во втором коде, где один чекбокс на все. Что там такое подключается вначале, в первой строке и почему так такой большой код?

    Reply

  12. Егор, в первой строчке подключается jQuery. Предложите свой вариант jQuery кода, если знаете, как можно написать короче.

    Reply

  13. а здесь вот изменение внешнего вида с помощью jQuery
    http://prootime.ru/beauty-checkboxes

    Reply

  14. Изменение внешнего вида — это не практично, с точки зрения программирования, с точки зрения дизайна — споров нет.

    Reply

  15. Спасибо за оба варианта. Автору респект и уважуха.

    Reply

  16. Огромное спасибо 🙂

    Reply

  17. Скрипт работает отлично! Но есть проблема, первый раз выделяются все отлично, но стоит сбросить и второй раз они уже все не выделятся. В чем может быть проблема?

    Reply

  18. Такая я же херня! Уже сутки ищу решение. Походу в новых версиях jQuery что изменилось и надо действовать по другому. Нашел только решение с использованием .trigger(), не знаю насколько это правильно.

    Reply

Оставить комментарий