Для работы скрипта нам понадобится 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"/>
- jQuery: полезные примеры, при работе с DOM
- jQuery: делаем формы интерактивными
- jQuery JSON: получаем данные из твиттера
- Система оценок на jQuery и PHP
- Работа с JSON в PHP и jQuery
Теги: jQuery, Полезные скрипты
нужно добавить фильтрацию, когда чекбокс «disabled»
Reply
2 sash
Причем здесь “disabled”, у меня в скрипте это параметр не используется.
Reply
при том, что когда имеем группу чекбоксов, в которой 1-2 отключены (disabled), то данный скрипт отмечает все равно все
здесь _http://www.simplecoding.org/pereklyuchenie-chekboksov-s-pomoshhyu-jquery.html это учитывается (в комментах), но работает сам алгоритм чуть не так, он делает инвертирование (отмечено/не отмечено)
Reply
>>данный скрипт отмечает все равно все
Уверен?
Проверь, какие данные будут передаваться. Ты путаешь параметр disabled и checked = false
Reply
уверен, был список 20 чекбоксов, все кроме одного были «disabled»
при клике «отметить все» действительно отмечались вообще все )) а должен был отметиться только один
Reply
Хм.. да действительно disabled чекбоксы тоже будут выделяться. Не учел я этого. При написании скрипта брал в пример интерфейс gmail. Молодец, что нашел такой баг)))
Reply
объединил обе части в один файл — не пашет 🙁
Reply
блин — забыл саму jquery подрубить 🙂 — всё пашет — супер
Reply
А как сделать чтобы не на ссылки нажимать (Все, Ни одного), а сделать общий checkbox (как на mail.ru) Нажал на него — все выделились, еще нажал — ни одного (т.е. все включать и выключать одним checkbox-ом)? А то я в jQuery не очень понимаю.
Reply
2 Alexey
Я обновил пост.
Reply
Короче во втором коде, где один чекбокс на все. Что там такое подключается вначале, в первой строке и почему так такой большой код?
Reply
Егор, в первой строчке подключается jQuery. Предложите свой вариант jQuery кода, если знаете, как можно написать короче.
Reply
а здесь вот изменение внешнего вида с помощью jQuery
http://prootime.ru/beauty-checkboxes
Reply
Изменение внешнего вида — это не практично, с точки зрения программирования, с точки зрения дизайна — споров нет.
Reply
Спасибо за оба варианта. Автору респект и уважуха.
Reply
Огромное спасибо 🙂
Reply
Читайте также: jQuery checkbox
Reply
Скрипт работает отлично! Но есть проблема, первый раз выделяются все отлично, но стоит сбросить и второй раз они уже все не выделятся. В чем может быть проблема?
Reply
Такая я же херня! Уже сутки ищу решение. Походу в новых версиях jQuery что изменилось и надо действовать по другому. Нашел только решение с использованием .trigger(), не знаю насколько это правильно.
Reply