Как выделить все чекбоксы одним кликом? 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)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 17 на запись

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии