10 февраля 2016      1315      1

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

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

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

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

<!-- Подключаем 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>

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

<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>

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

<!-- Подключаем 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>
<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>

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

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

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

<!-- Подключаем 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>

<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>

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

  • Абдурахман ибн Хоттаб (BTC4you

    сделал себе последний вариант, только Выделить сделал чекбоксом, а снять бутоном рядом с кнопкой Отправить. Работает на первый взгляд отлично, но только после Снятия, обратно Выделить Все не работает))

Все темы на сайте

© 2017 BorPost · Копирование материалов сайта без разрешения запрещено