Переключение чекбоксов с помощью jQuery

28 ноября, 2008
toggle checkboxes

На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.

Кстати, это довольно широкораспространенная задача.

Количество чекбоксов изменялось динамически и некоторые из них могли быть не активными (их трогать нельзя).

Вобщем, уложился я в шесть строк (включая объявление функции).

  1. function toggleAll() {
  2.     var allCheckboxes = $("#checkboxes input:checkbox:enabled");
  3.     var notChecked = allCheckboxes.not(':checked');
  4.     allCheckboxes.removeAttr('checked');
  5.     notChecked.attr('checked', 'checked');
  6. }

Наверное, код можно еще подсократить, но, честно говоря, думать дальше не хочется :) .

Вкратце поясню, как это работает.

Прежде всего, разметка:

  1. <div id="checkboxes">
  2.     <p><input type="checkbox" /></p>
  3.     <p><input type="checkbox" /></p>
  4.     <p><input type="checkbox" /></p>
  5.     <p><input type="checkbox" /></p>
  6.     <p><input type="checkbox" /></p>
  7.     <p><input type="checkbox" /></p>
  8.     <p><input type="checkbox" /></p>
  9.     <p><input type="checkbox" /></p>
  10. </div>

Обычная группа чекбоксов, которые находятся внутри тега div. В принципе, разметка большой роли не играет. Главное, чтобы вы могли выбрать необходимые чекбоксы.

Алгоритм работы функции.

1) Находим все активные чекбоксы (input:checkbox:enabled).

2) Из них выбираем не отмеченные (not(':checked')).

3) Снимаем отметку у всех чекбоксов (для этого просто удаляем атрибут checked).

4) Отмечаем те чекбоксы, которые были раньше не отмечены (attr('checked', 'checked')).

Как видите, функция получилась довольно короткая.

Если есть идеи как её сократить, буду рад выслушать ;)

Интересно почитать:

Какова ваша отдача от инвестиций в час?

Понравилась статья? Подписывайтесь на продолжение rss link !

Или на мой твиттер twitter link

]]>

Добавьте эту страницу в google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

]]>

Опубликовано в HTML, JavaScript, Web разработка View Comments

]]>
  • axel
    вот здесь еще норм чекбоксы http://prootime.ru/beauty-checkboxes
    правда картинки использованы
  • Отличный пример!
    А использовать картинки или нет, каждый решает сам. В любом случае чекбоксы должны вписываться в дизайн.
  • test
    код выше допускает только 1 выбранный чекбокс, остальные выключаем
  • Румата
    Подскажите как лаконичнее (короче) реализовать ситуацию когда может быть отмечен только один чекбокс или ни одного?
    $("td.set input:checkbox").change(function(){
    var id=$(this).attr("id");
    $("td.set input:checked").each(function() {
    if ($(this).attr("id")!=id) $(this).attr("checked",false);
    });
    });
  • Как лаконичнее - не подскажу. Но ваш пример с виду рабочий (не проверял) и еще есть пример тремя комментариями выше.
  • Вы, наверное, видели фильм "Бриллиантовая рука"? ;)

    - Это не эстетично.
    - Зато дёшево, надёжно и практично.

    :)

    А если серьезно, то переменную убрать, скорее всего, получится, но читать при этом код будет наверняка тяжелее.
  • Румата
    Да, он у меня используется... Просто не эстетично смотрится промежуточная переменная var id
  • Спасибо, интересный пример.
  • test
    function VipSeances(){
    $('input.vip').each(function(){
    $(this).attr('disabled',false);

    $('input.vip:checked').each(function(){
    $('input.vip').attr('disabled',true);
    $(this).attr('disabled',false);
    });
    });
    }
  • Слишком намудрили, Евгений предлогает код попроще.
  • Тогда уж лучше сразу:
    function togCheck(){
    $('#checkboxes input:checkbox:enabled').each(function(){this.checked = !this.checked});
    }

    Есть еще вариант, используя attr, где в качестве второго параметра передается функция:
    function togCheck(){
    $('#checkboxes input:checkbox:enabled').attr
    (
    "checked",
    function()
    {
    return !this.checked;
    }
    );
    }

    PS. Код не тестился, но логику понять можно.
  • А вот это решение мне действительно понравилось. Кстати, у меня заработало :)
    Единственно, вызывает сомнение второй параметр.
    По стандарту должно быть checked="checked", а здесь checked=true, похоже jQuery сама вносит исправления.
  • Как насчет такого:
    function togCheck(){
    $('#checkboxes input:checkbox').each(function(){this.checked = !this.checked;});
    }
  • Отлично!
    Ваш вариант читается легче, да и короче.
    Остается только добавить :enabled, чтобы пропустить не активные чекбоксы.
  • Да, забыл о таком условии.

    А исправляется это все вот так:
    function togCheck(){
    $('#checkboxes input:checkbox').each(function(){this.checked = !this.checked && !this.disabled;});
    }
blog comments powered by Disqus ]]>