В любой нормальной системе и нормальном скрипте, который работает с большим количеством файлов или строк, необходима возможность для произведения операций над несколькими объектами, будь то обычные файлы или письма из базы данных. Например, в злосчастном фкантакти такая система сделана на странице с письмами - можно массово выделять и удалять.
Достигается это посредством javascript или посредством ajax, что по сути одно и тоже. В данной статье я покажу как можно сделать это на javascript'е, а также приведу три примера реализации задачи на jQuery.
Выделяем все чекбоксы через JavaScript одним кликом
Пример 1
Для начала рассмотрим html-код.
<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>
В принципе ничего сложного нет вообще. Однако обращу внимание на несколько моментов:
-
Форме обязательно нужно имя, в данном случае оно 'form_name1'.
-
Выделение происходит через ссылку - происходит вызов нашей будущей функции.
-
Каждый чекбокс обёрнут тегом label - всё для того, чтобы выбор можно было производить по клику не только по клеточке, но и по надписи.
-
Каждому чекбоксу обязательно дать имя, одинаковое, в данном случае cheks.
Теперь сам код скрипта.
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;
}
-
Строка 2. На случай, если не существуют чекбоксы с выбранным именем (checks), то чтобы не происходило ошибки нужно прописать возврат (return).
-
Строки 3-5. На случай, если с таким именем будут не чекбоксы, то вызывается обработчик (проверка через количество элементов). Он записан сокращённой записью конструкции if-else. В принципе строки не очень важны, главное, чтобы название было прописано тому, кому надо.
-
Строки 6-9. Основной код, который и выполняет нужной нами действие. Вызывается цикл, который проверяет количество чекбоксов с выбранным нами именем (через length), который каждому чекбоксу инвертирует его выделение.
Всё хорошо, только есть один минус - если у нас какие-то чекбоксы уже выделены, то происходит их инвертирование. То есть у нас получился скрипт не выделения/снятия выделения всех чекбоксов, а по сути изменение всех вкл на выкл, а всех выкл на вкл. Это нужно исправить. Второе,ч то хотелось бы исправить, так это выделение всех не посредством ссылки, а посредством такого же чекбокса. Итак…
Пример 2
Рассмотрим html-код.
<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>
Внесено всего лишь несколько небольших изменений.
-
Форма теперь должна иметь не только имя, но и идентификатор (id='form_name2'). В принципе имя для скрипта и не нужно, выбор идёт через id.
-
Добавлен чекбокс для выделения (строки 2-3). Инпуту добавлено событие onclick, которое вызывает нашу функцию.
-
По сравнению с предыдущим примером, функции необходимо передать одну переменную - идентификатор формы.
Теперь рассмотрим js код
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. Создаём переменную, по которой будет проверяться включены чекбоксы или выключены. Изначально параметр равен нулю, то есть всё выключено.
-
Строки 3-9. Аналогичны предыдущему примеру за исключением того, что выбор идёт уже не через имя формы, а её идентификатор (getElementById)
-
Строка 10-12. Если в переменной 0, то есть все флажки выключены, то все флажки надо включить.
-
Строки 13-15. Аналогично предыдущему пункту, только с выключением флажков.
- Строки 17-18. Если мы всё включили, то нужно нашей переменной дать значение равное единице (17 строка), а если выключили, то нулю (18 строка).
Выделяем все чекбоксы через jQuery
На jQuery это сделать гораздо проще. Рассмотрим html-код.
<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
$("#check_all").click(function() {
var checked_status = this.checked;
$("input[@name=checks]").each(function() {
this.checked = checked_status;
});
});
});
По идентификатору check_all у нас находится чекбокс, который будет выделять все остальные чекбоксы. Этому идентификатору присваивается событие onclick. А затем по имени всех чекбоксов (имя всё тоже самое - checks) происходит включение/выключение чекбоксов.
Две функции для всех jQuery
$("#check_all").click(function () {
if (!$("#check_all").is(":checked"))
$(".checkbox").removeAttr("checked");
else
$(".checkbox").attr("checked","checked");
});
});
Думаю комментариев не нужно, всё предельно просто - снимается или добавляется атрибут checked в зависимости от того, включён он или нет.
Есть ещё один способ, который стоит иметь в виду, но использовать не стоит, так как он обладает дефектом как в первом примере на JavaScript - если что-то было отмечено, то оно инвентируется.
$("#check_all").click(function(){
$("input.checkbox").click();
});
});
Работает всё просто: мы выделяем все чекбоксы при помощи одного события click().
В завершение
Вот и всё, что я хотел рассказать сегодня. Теперь мы можем выделять чекбоксы как ява-скриптом, так и ж-кьюрей. А примеры вы сможете посмотреть по ссылке.
Похожие записи:
- Формы, часть 3, ВСЁ, что нужно для валидации форм на jQuery
- "Как скрасить время ожидания пользователя" или "Предварительная загрузка страницы"
- Скрипт меню с контентом “почти как флэш” своими руками. Часть 2. Программирование.
- Формы, часть 1, “Форма обратной связи на PHP”
- Красивое раскрывающееся меню на jQuery
27/02/2010 at 10:13 Постоянная ссылка Цитировать
с JQuery мне большее понравился метод) Как то более Оригинальнее чем с js.
27/02/2010 at 10:16 Постоянная ссылка Цитировать
Возможно и так, но js-метод тоже имеет право на существование. Иными словами всё для выбора на вкус и на цвет =)
27/02/2010 at 19:35 Постоянная ссылка Цитировать
Ну, как говорится “На вкус и цвет, товарищей нет”. =)
27/02/2010 at 23:51 Постоянная ссылка Цитировать
Ого, спасибо за полезную статью. Я конечно не знал, что можно выделить с jq чекбоксы, т.е. знал, но не знал как именно. очень помогло
27/02/2010 at 23:58 Постоянная ссылка Цитировать
2Владислав. Ага, именно =)
2Reysler. Всегда пожалуйста, рад быть полезен =)
16/06/2010 at 20:36 Постоянная ссылка Цитировать
Хорошая статья! Есть только 1 вопрос возможно ли выделенные чекбоксы, занести в массив, чтобы передать php уже готовые данные.
16/06/2010 at 23:18 Постоянная ссылка Цитировать
ну, можно задать каждому чекбоксу имя cheks[], тогда при передачи формы пхп скрипту будет массив из элементов checks[0] checks[1] и т.д.
02/08/2010 at 15:53 Постоянная ссылка Цитировать
здравствуйте, помогите пожалуйста, у меня есть некая страница php, в которой прописана функция вывода зависимых полей с категориями, уже неделю не спала не могу ее найти, вернее в исходном коде страницы я ее вижу в php нет, объясните пожалуйста как найти эту функцию?? файл могу прислать куда скажете
02/08/2010 at 16:04 Постоянная ссылка Цитировать
не очень понял, чего где найти.
пишите на почту, помогу чем смогу
11/11/2010 at 19:18 Постоянная ссылка Цитировать
Спасибо, статья очень помогла, способ два мне какраз подошол…
11/11/2010 at 20:02 Постоянная ссылка Цитировать
Всегда пожалуйста =)
07/02/2011 at 13:17 Постоянная ссылка Цитировать
Все это конечно позновательно спору нет – сталья класс, но меня больше интересует другой вопрос: как происходит обработка чекбоксов на стороне сервера в пыхе (php)? Я вижу что каждый чекбокс имеет одинаковое имя (checks) – это не масив и при отправке формы в пых лиш видит последний чекбокс а не масив как должен бы увидеть… кто подскажет как происходит обработка на стороне сервера?
Я так думаю что нужно было называть чекбоксы не checks а checks[ ] – тогда еще др. разговор…
07/02/2011 at 14:07 Постоянная ссылка Цитировать
да, вопрос уже задавался, ответчуть выше , там говорится как вы и предлагали –
checks[]
30/11/2012 at 15:30 Постоянная ссылка Цитировать
ни один способ не справился с ‘name=checks[]‘ галку не ставит
14/12/2012 at 12:20 Постоянная ссылка Цитировать
В примере на jquery исправил тестовые пример и там как раз используются checks[]. Работает.
Что касается примеров, где поиск идёт по атрибуту name, то да, там не будет работать.
01/05/2015 at 20:14 Постоянная ссылка Цитировать
Спасибо огромное! Единственный сайт, где реально нашел конкретное работающее решение по данной тематике, без лишней демагогии, хотя перерыл весь рунет, скриптов и решений много, но либо мутные, либо реально не работающие или совершенно неподходящие (возможно, я чего-то там не понял). А здесь все четко, конкретно и понятно, а главное все работает, ясен принцип, можно выбрать наиболее подходящий вариант, модифицировать под себя и поэкспериментировать, все отлично работает. Еще раз огромное спасибо автору и админу!
02/05/2015 at 0:06 Постоянная ссылка Цитировать
Спасибо большое за столь приятный отзыв. Текст действительно писался и рассчитывался на то, чтобы кратко и ёмко изложить все принципы по реализации без лишних слов. Рад слышать, что это удалось =)
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");
}
}