Как выделить все чекбоксы одним кликом? JavaScript способ, и три способа на jQuery

26 февраля 2010 18 Рубрика: AJAX, JavaScript, jQuery

« Предыдущая запись
 		   Следующая запись »
 

В любой нормальной системе и нормальном скрипте, который работает с большим количеством файлов или строк, необходима возможность для произведения операций над несколькими объектами, будь то обычные файлы или письма из базы данных. Например, в злосчастном фкантакти такая система сделана на странице с письмами - можно массово выделять и удалять.

Достигается это посредством javascript или посредством ajax, что по сути одно и тоже. В данной статье я покажу как можно сделать это на javascript'е, а также приведу три примера реализации задачи на jQuery.


Выделяем все чекбоксы через JavaScript одним кликом

Пример 1

Для начала рассмотрим html-код.

<form method="POST" name='form_name1'>
   <a href="javascript:sel_all()" title="Выделить всё/снять выделение">Выделить всё/снять выделение</a><br>
   <label><input type="checkbox" name="cheks" checked value="1"> Чекбокс 1</label>  <br>
   <label><input type="checkbox" name="cheks" value="2"> Чекбокс 2</label>  <br>
   <label><input type="checkbox" name="cheks" value="3"> Чекбокс 3</label>  <br>
</form>

В принципе ничего сложного нет вообще. Однако обращу внимание на несколько моментов:

  1. Форме обязательно нужно имя, в данном случае оно 'form_name1'.
  2. Выделение происходит через ссылку - происходит вызов нашей будущей функции.
  3. Каждый чекбокс обёрнут тегом label - всё для того, чтобы выбор можно было производить по клику не только по клеточке, но и по надписи.
  4. Каждому чекбоксу обязательно дать имя, одинаковое, в данном случае cheks.

Теперь сам код скрипта.

function sel_all(){
   if( !document.form_name1.cheks ) return;
   if( !document.form_name1.cheks.length )
      document.form_name1.cheks.checked = document.form_name1.cheks.checked ? false : true;
   else
      for(var i=0;i<document.form_name1.cheks.length;i++)
         document.form_name1.cheks[i].checked = document.form_name1.cheks[i].checked ? false : true;
}
  1. Строка 2. На случай, если не существуют чекбоксы с выбранным именем (checks), то чтобы не происходило ошибки нужно прописать возврат (return).
  2. Строки 3-5.  На случай, если с таким именем будут не чекбоксы, то вызывается обработчик (проверка через количество элементов). Он записан сокращённой записью конструкции if-else. В принципе строки не очень важны, главное, чтобы название было прописано тому, кому надо.
  3. Строки 6-9. Основной код, который и выполняет нужной нами действие. Вызывается цикл, который проверяет количество чекбоксов с выбранным нами именем (через length), который каждому чекбоксу инвертирует его выделение.

Всё хорошо, только есть один минус - если у нас какие-то чекбоксы уже выделены, то происходит их инвертирование. То есть у нас получился скрипт не выделения/снятия выделения всех чекбоксов, а по сути изменение всех вкл на выкл, а всех выкл на вкл. Это нужно исправить. Второе,ч то хотелось бы исправить, так это выделение всех не посредством ссылки, а посредством такого же чекбокса. Итак…

Пример 2

Рассмотрим html-код.

<form method="POST" name='form_name2' id='form_name2'>
   <label><input type="checkbox" name="cheks" value="0" onclick="sel_all2('form_name2')"> Выделить всё</label>  <br>
   <label><input type="checkbox" name="cheks" value="1"> Чекбокс 1</label>  <br>
   <label><input type="checkbox" name="cheks" value="2"> Чекбокс 2</label>  <br>
   <label><input type="checkbox" name="cheks" value="3"> Чекбокс 3</label>  <br>
</form>

Внесено всего лишь несколько небольших изменений.

  1. Форма теперь должна иметь не только имя, но и идентификатор (id='form_name2'). В принципе имя для скрипта и не нужно, выбор идёт через id.
  2. Добавлен чекбокс для выделения (строки 2-3). Инпуту добавлено событие onclick, которое вызывает нашу функцию.
  3. По сравнению с предыдущим примером, функции необходимо передать одну переменную - идентификатор формы.

Теперь рассмотрим js код

var check_check = '0';
function sel_all2(name_of_form){
   if( !document.getElementById(name_of_form).cheks ) return;
   if( !document.getElementById(name_of_form).cheks.length )
      document.getElementById(name_of_form).cheks.checked = document.getElementById(name_of_form).cheks.checked ? false : true;
   else {
      for(var i=0;i<document.getElementById(name_of_form).cheks.length;i++) {
         if (check_check=='0')
            document.getElementById(name_of_form).cheks[i].checked = true;
         else
            document.getElementById(name_of_form).cheks[i].checked = false;
      }
      if (check_check=='0') check_check = '1';
      else check_check = '0';
   }
}
  1. Строка 1. Создаём переменную, по которой будет проверяться включены чекбоксы или выключены. Изначально параметр равен нулю, то есть всё выключено.
  2. Строки 3-9. Аналогичны предыдущему примеру за исключением того, что выбор идёт уже не через имя формы, а её идентификатор (getElementById)
  3. Строка 10-12. Если в переменной 0, то есть все флажки выключены, то все флажки надо включить.
  4. Строки  13-15. Аналогично предыдущему пункту, только с выключением флажков.
  5. Строки 17-18. Если мы всё включили, то нужно нашей переменной дать значение равное единице (17 строка), а если выключили, то нулю (18 строка).

 

Выделяем все чекбоксы через jQuery

На jQuery это сделать гораздо проще. Рассмотрим html-код.

<form method="POST">
    <label><input type="checkbox" id="check_all"> Выделить всё</label>  <br>
    <label><input type="checkbox" name="checks" class="checkbox" value="1"> Чекбокс 1</label>  <br>
    <label><input type="checkbox" name="checks" class="checkbox" value="2"> Чекбокс 2</label>  <br>
    <label><input type="checkbox" name="checks" class="checkbox" value="3"> Чекбокс 3</label>  <br>       
</form>

Я предлагаю два способа реализации на jQuery. html-код будет одинаковый, а функции совершенно разные. Однако одна из них работает только в jQuery 1.2.6 и младше, а вторая везде. Но всё таки рассмотреть её стоит, для общего развития, с чего мы и начнём.

Функция для jQuery 1.2.6

$(document).ready(function() {
    $("#check_all").click(function() {
        var checked_status = this.checked;
        $("input[@name=checks]").each(function() {
            this.checked = checked_status;
        });
    });
});   

По идентификатору check_all у нас находится чекбокс, который будет выделять все остальные чекбоксы. Этому идентификатору присваивается событие onclick. А затем по имени всех чекбоксов (имя всё тоже самое - checks) происходит включение/выключение чекбоксов.

Две функции для всех jQuery
$(document).ready(function() {
    $("#check_all").click(function () {
         if (!$("#check_all").is(":checked"))
            $(".checkbox").removeAttr("checked");
        else
            $(".checkbox").attr("checked","checked");
    });
});   

Думаю комментариев не нужно, всё предельно просто - снимается или добавляется атрибут checked в зависимости от того, включён он или нет.

Есть ещё один способ, который стоит иметь в виду, но использовать не стоит, так как он обладает дефектом как в первом примере на JavaScript - если что-то было отмечено, то оно инвентируется.

$(document).ready(function(){
   $("#check_all").click(function(){
      $("input.checkbox").click();
   });
});

Работает всё просто: мы выделяем все чекбоксы при помощи одного события click().

 

В завершение

Вот и всё, что я хотел рассказать сегодня. Теперь мы можем выделять чекбоксы как ява-скриптом, так и ж-кьюрей. А примеры вы сможете посмотреть по ссылке.

 

 

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!

Похожие записи:

  1. Владислав Леухин
    27/02/2010 at 10:13 Постоянная ссылка Цитировать

    с JQuery мне большее понравился метод) Как то более Оригинальнее чем с js.

  2. Александр Шуйский
    27/02/2010 at 10:16 Постоянная ссылка Цитировать

    Возможно и так, но js-метод тоже имеет право на существование. Иными словами всё для выбора на вкус и на цвет =)

  3. Владислав Леухин
    27/02/2010 at 19:35 Постоянная ссылка Цитировать

    Ну, как говорится “На вкус и цвет, товарищей нет”. =)

  4. Reysler
    27/02/2010 at 23:51 Постоянная ссылка Цитировать

    Ого, спасибо за полезную статью. Я конечно не знал, что можно выделить с jq чекбоксы, т.е. знал, но не знал как именно. очень помогло :)

  5. Александр Шуйский
    27/02/2010 at 23:58 Постоянная ссылка Цитировать

    2Владислав. Ага, именно =)

    2Reysler. Всегда пожалуйста, рад быть полезен =)

  6. onzone
    16/06/2010 at 20:36 Постоянная ссылка Цитировать

    Хорошая статья! Есть только 1 вопрос возможно ли выделенные чекбоксы, занести в массив, чтобы передать php уже готовые данные.

  7. Александр Шуйский
    16/06/2010 at 23:18 Постоянная ссылка Цитировать

    ну, можно задать каждому чекбоксу имя cheks[], тогда при передачи формы пхп скрипту будет массив из элементов checks[0] checks[1] и т.д.

  8. malinka
    02/08/2010 at 15:53 Постоянная ссылка Цитировать

    здравствуйте, помогите пожалуйста, у меня есть некая страница php, в которой прописана функция вывода зависимых полей с категориями, уже неделю не спала не могу ее найти, вернее в исходном коде страницы я ее вижу в php нет, объясните пожалуйста как найти эту функцию?? файл могу прислать куда скажете

  9. Александр Шуйский
    02/08/2010 at 16:04 Постоянная ссылка Цитировать

    не очень понял, чего где найти.
    пишите на почту, помогу чем смогу

  10. Sliper
    11/11/2010 at 19:18 Постоянная ссылка Цитировать

    Спасибо, статья очень помогла, способ два мне какраз подошол…

  11. Александр Шуйский
    11/11/2010 at 20:02 Постоянная ссылка Цитировать

    Всегда пожалуйста =)

  12. dsn
    07/02/2011 at 13:17 Постоянная ссылка Цитировать

    Все это конечно позновательно спору нет – сталья класс, но меня больше интересует другой вопрос: как происходит обработка чекбоксов на стороне сервера в пыхе (php)? Я вижу что каждый чекбокс имеет одинаковое имя (checks) – это не масив и при отправке формы в пых лиш видит последний чекбокс а не масив как должен бы увидеть… кто подскажет как происходит обработка на стороне сервера?
    Я так думаю что нужно было называть чекбоксы не checks а checks[ ] – тогда еще др. разговор…

  13. Александр Шуйский
    07/02/2011 at 14:07 Постоянная ссылка Цитировать

    да, вопрос уже задавался, ответ чуть выше, там говорится как вы и предлагали –
    checks[]

  14. AlexX
    30/11/2012 at 15:30 Постоянная ссылка Цитировать

    ни один способ не справился с ‘name=checks[]‘ галку не ставит

  15. Александр Шуйский
    14/12/2012 at 12:20 Постоянная ссылка Цитировать

    В примере на jquery исправил тестовые пример и там как раз используются checks[]. Работает.

    Что касается примеров, где поиск идёт по атрибуту name, то да, там не будет работать.

  16. Леон
    01/05/2015 at 20:14 Постоянная ссылка Цитировать

    Спасибо огромное! Единственный сайт, где реально нашел конкретное работающее решение по данной тематике, без лишней демагогии, хотя перерыл весь рунет, скриптов и решений много, но либо мутные, либо реально не работающие или совершенно неподходящие (возможно, я чего-то там не понял). А здесь все четко, конкретно и понятно, а главное все работает, ясен принцип, можно выбрать наиболее подходящий вариант, модифицировать под себя и поэкспериментировать, все отлично работает. Еще раз огромное спасибо автору и админу!

  17. Александр Шуйский
    02/05/2015 at 0:06 Постоянная ссылка Цитировать

    Спасибо большое за столь приятный отзыв. Текст действительно писался и рассчитывался на то, чтобы кратко и ёмко изложить все принципы по реализации без лишних слов. Рад слышать, что это удалось =)

  18. Александр
    18/01/2017 at 23:21 Постоянная ссылка Цитировать

    Переделал по д свои нужды и столкнулся с проблемой:
    Нажал раз – отметились все нужные чекбоксы, нажал два – все снялось, нажаль три и ничего не происходит. Тоесть проходит один полный цикл – вкл и выкл и после этого тишина. В чем может быть дело.
    Вот код
    function check(id){
    if( $("#total_"+id).is(":checked") ){
    $(".checkbox_"+id).attr("checked","checked");
    }else if(!$("#total_"+id).is(":checked")){
    $(".checkbox_"+id).removeAttr("checked");
    }
    }