Закрыть ... [X]

Как отметить все чекбоксы (checkbox)

Как отметить все чекбоксы? Воспользуемся jquery. Сразу предупреждаю, что в этом нет ничего сложного, не пугайтесь обилия кода в уроке. В основном это один и тот же код, повторённый несколько раз с небольшими изменениями.

Как отметить все чекбоксы с помощью ссылок

Чтобы отметить все чекбоксы, сделаем к ним 2 ссылки «отметить все» и «сбросить все»

[code lang=»js»]<!— Подключаем jquery —>
<script type="text/javascript" src="/jquery.1.3.2.js"></script>
<!— создаём формы —>

<form action="" id="example_group1">
<input type="checkbox" name="cbname[]" value="1" />
<input type="checkbox" name="cbname[]" value="2" />
<input type="checkbox" name="cbname[]" value="3" />
<input type="checkbox" name="cbname[]" value="4" />
<input type="checkbox" name="cbname[]" value="5" />
<input type="checkbox" name="cbname[]" value="6" />
<input type="checkbox" name="cbname[]" value="7" />
<input type="checkbox" name="cbname[]" value="8" disabled="disabled" />
<input type="checkbox" name="cbname[]" value="9" disabled="disabled" />
<input type="checkbox" name="cbname[]" value="10" disabled="disabled" checked="checked" />
<input type="checkbox" name="cbname[]" value="11" disabled="disabled" checked="checked" />
<input type="checkbox" name="cbname[]" value="12" />
<input type="checkbox" name="cbname[]" value="13" />
</form>

<!— Ключевые ссылки —>
Выбрать: <a rel="example_group1" href="#select_all">Отметить все чекбоксы</a>,
<a rel="group1" href="#select_none">Сбросить все</a>[/code]

У ссылок есть атрибут rel=»form». Он определяет, для каких чекбоксов работает скрипт. В данном случае, для любого объекта с id=»example_group1″ Теперь напишем код, который будет отмечать все чекбоксы:

[code lang=»js»]<script type="text/javascript">
$(document).ready( function() {
// Активируем все чекбоксы
//При клике на ссылку "Отметить все чекбоксы", активируем checkbox
$("a[href=’#select_all’]").click( function() {

$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, true);
//Если вам нужно отмечать и неактивные чекбоксы (disabled), то предыдущая строчка должна выглядеть так:
//$("#" + $(this).attr(‘rel’) + " input:checkbox").attr(‘checked’, true);
return false;
});

// Снимаем все отметки
$("a[href=’#select_none’]").click( function() {
$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, false);
//Если должны обрабатываться неактивные чекбоксы, опять исключаем параметр :enabled
//$("#" + $(this).attr(‘rel’) + " input:checkbox").attr(‘checked’, true);
return false;
});
});
</script>[/code]

Как отметить все чекбоксы с помощью кнопок

[code lang=»js»]<!— Подключаем jquery —>
<script type="text/javascript" src="/jquery.1.3.2.js"></script>
<!— создаём формы —>

<form action="" id="example_group2">
<input type="checkbox" name="cbname2[]" value="1" />
<input type="checkbox" name="cbname2[]" value="2" />
<input type="checkbox" name="cbname2[]" value="3" />
<input type="checkbox" name="cbname2[]" value="4" />
<input type="checkbox" name="cbname2[]" value="5" />
<input type="checkbox" name="cbname2[]" value="6" />
<input type="checkbox" name="cbname2[]" value="7" />
<input type="checkbox" name="cbname2[]" value="8" disabled="disabled" />
<input type="checkbox" name="cbname2[]" value="9" disabled="disabled" />
<input type="checkbox" name="cbname2[]" value="10" disabled="disabled" checked="checked" />
<input type="checkbox" name="cbname2[]" value="11" disabled="disabled" checked="checked" />
<input type="checkbox" name="cbname2[]" value="12" />
<input type="checkbox" name="cbname2[]" value="13" />
<input type="button" name="all" id="example_all" rel="example_group2" value="Отметить все чекбоксы" />
<input type="button" name="noone" id="example_noone" rel="example_group2" value="Сбросить все" />
</form>
[/code]

[code lang=»js»]<script type="text/javascript"> $(document).ready( function() { // Выбор всех //При клике по кнопке "отметить все" активируем чекбоксы $("#example_all").click( function() { $("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, true); return false; }); // При клике по кнопке "сбросить все" убираем отметки $("#example_noone").click( function() { $("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, false); return false; }); }); </script>[/code]

Как видите, всё почти так же, как и в способе с ссылками. Разница только в том, что ссылки мы различаем по параметру href, а кнопки по id

Как отметить все чекбоксы с одного главного чекбокса

Так же можно повесить отметку всех чекбоксов на один чекбокс:

[code lang=»js»]<!— Подключаем jquery —>
<script type="text/javascript" src="/jquery.1.3.2.js"></script>
<!— создаём формы —>

<form action="" id="example_group2">
<input type="checkbox" name="cbname2[]" value="1" />
<input type="checkbox" name="cbname2[]" value="2" />
<input type="checkbox" name="cbname2[]" value="3" />
<input type="checkbox" name="cbname2[]" value="4" />
<input type="checkbox" name="cbname2[]" value="5" />
<input type="checkbox" name="cbname2[]" value="6" />
<input type="checkbox" name="cbname2[]" value="7" />
<input type="checkbox" name="cbname2[]" value="8" disabled="disabled" />
<input type="checkbox" name="cbname2[]" value="9" disabled="disabled" />
<input type="checkbox" name="cbname2[]" value="10" disabled="disabled" checked="checked" />
<input type="checkbox" name="cbname2[]" value="11" disabled="disabled" checked="checked" />
<input type="checkbox" name="cbname2[]" value="12" />
<input type="checkbox" name="cbname2[]" value="13" />
<input type="button" name="all" id="example_all" rel="example_group2" value="Отметить все чекбоксы" />
<input type="button" name="noone" id="example_noone" rel="example_group2" value="Сбросить все" />
</form>

[/code]

[code lang=»js»]<script type="text/javascript">
$(document).ready( function() {
// Выбор всех
//При клике по кнопке "отметить все" активируем чекбоксы
$("#example_all").click( function() {
$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, true);
return false;
});

// При клике по кнопке "сбросить все" убираем отметки
$("#example_noone").click( function() {
$("#" + $(this).attr(‘rel’) + " input:checkbox:enabled").attr(‘checked’, false);
return false;
});
});
</script>[/code]

Учтите, что , ради избегания рекурсии, нужно ключевой чекбокс сделать не таким как все. Это можно реализовать с помощью присвоения класса для всех чекбоксов, кроме ключевого. В примере таким классом является .example_check.


Как отметить все чекбоксы (checkbox)



СЕЙЧАС ЧИТАЮТ




Похожие статьи

Макросы для МАГА WoW 4.3.4
В каком дворце Санкт-Петербурга впоследствии открылся художественный музей? | Ответы
Драгоценный склад | Кроссворды, Сканворды
? Самая маленькая коробка от NYX ? • Unboxing Top 15 • #FACEAWARDSRUSSIA2018. Ответы на различные игры в социальных сетях
Подготовьте доклад о применении аккумуляторов
Миксер слов (из игры Два слова в одном) - ответы на уровни 51-100
Игра "Угадай кино" ответы в Одноклассниках: раздел МУЛЬТФИЛЬМЫ уровни 51-100
Естественное состояние эгоцентрика | Кроссворды, Сканворды
Шпанский голубь | Кроссворды, Сканворды
Даже во время холодной войны этой тюрьмой Западного Берлина



ШОКИРУЮЩИЕ НОВОСТИ