Очень часто возникает задача отметить все флажки checkbox на странице, в яваскрипт решение этой задачи сводится к циклу (если бы это было php, проблем бы не возникало):
for (var i=0; i<’количество_флажков’; i++) {
document.getElementById(‘флажок_’+i).checked=document.getElementById(‘отметить_все’).checked;
}
Здесь нет ничего сложного, кроме того что нужно придумывать уникальные идентификаторы для всех checkbox на странице. Да это же просто, скажете Вы. Приведу простой пример: сейчас работаю над системой размещения баннеров на сайте. В общем ситуация следующая – есть несколько страниц с местами для баннеров, для каждой страницы можно выбрать регион показа или отдельный город отметив нужный флажок. В базе данных 83 региона и больше 1000 городов, соответственно и количество флажков порядка 1000 для каждой из страниц. Каждый раз перебирать циклом такое количество – это не очень то благодарное занятие, при том что флажки городов привязаны к флажками регионов, и отметив все регионы нам нужно также отметить все города. Ну и т.д., можно долго рассказывать.
Вернемся к jQuery. Если вы помниет, функция $ может обращаться как к идентификатору, так и к названию стиля. Итак, начнем:
<input type="checkbox" id="check_all" onchange="check_all()" /> - отметить все
<input type="checkbox" id="checkbox_1" class="checkbox_class" /> - checkbox 1
<input type="checkbox" id="checkbox_2" class="checkbox_class" /> - checkbox 2
<input type="checkbox" id="checkbox_3" class="checkbox_class" /> - checkbox 3
Флажки готовы, осталось написать функцию check_all():
function check_all() {
if (document.getElementById(‘check_all’).checked) {
$(‘.checkbox_class’). attr(‘checked’,’checked’);
}
else {
$(‘.checkbox_class’). removeAttr(‘checked’) ;
}
checkbox_count();
}
Здесь мы использовали два метода jQuery: .attr() и .removeAttr() которые добавляют или удаляют атрибут к html элементу соответственно. Как работает функция check_all() можно посмотреть внизу страницы. Обратите внимание что в ее конце стоит вызов функции checkbox_count(), подсчитывающей количество отмеченных флажков, которая описана ниже.
Теперь перейдем к подсчету количества флажков на странице. Зачем это нужно – спросите Вы. Очень часто нельзя сказать, какое количество checkboxов есть на странице, если она генерируется динамически, например у вас есть каталог организаций, в котором каждая организация может отметиться в нескольких категориях, т.е. на странице добавления организации есть флажки соответствующие определенной категории. По ходу развития сайта, увеличивается количество категорий и Вы же не хотите каждый раз менять шаблон с формой добавления или яваскрипт файлы. Итак, в качестве основы возьмем все приведенный выше список из 3-х checkboxов, однако добавим к каждому из них событие onchange:
<input type="checkbox" id="check_all" onchange="check_all()" /> - отметить все
<input type="checkbox" onchange="checkbox_count()" id="checkbox_1"class="checkbox_class" /> - checkbox 1
<input type="checkbox" onchange="checkbox_count()" id="checkbox_2"class="checkbox_class" /> - checkbox 2
<input type="checkbox" onchange="checkbox_count()" id="checkbox_3"class="checkbox_class" /> - checkbox 3
и добавим к этому следущий код:
<p style="display:none" id="counter">
Отмечено флажков
<span id="checked_count">Здесь будет количество отмеченных</span> из <span id="checkbox_count">а здесь общее количество</span>
</p>
Сначала опишем функцию: при изменении checkboxа она будет показывать параграф counter и помещать в span checked_count количество отмеченных флажков, а в checkbox_count – общее количество.
function checkbox_count() {
$(‘#counter’).show(‘fast’); //показываем параграф со счетчиком
var checkbox_count=$(‘.checkbox_class’).length; //помещаем количество флажков в переменную checkbox_count
$(‘# checkbox_count’).html(checkbox_count); //выводим общее количество флажков
var checked_count= $(':checkbox:checked.checkbox_class').length; // - разберем эту строку ниже
$(‘# checked_count’).html(checked_count);
}
Ну вот и все. Теперь подробнее о строке $(':checkbox:checked.checkbox_class).length. Здесь описан селектор :checkbox – указывает, что нужно смотреть все элементы input с типом checkbox, далее через двоеточие атрибут checked и через точку название класса. Аналогично можно писать любые селекторы для любых элементов, в самом начале это не просто и не очевидно, однако по мере освоения jQuery вы этому научитесь. На этом можно закончить и посмотреть как все это работает:
