Блог старого компьютера

Блог старого компьютера


Главная Jquery Отметить все чекбоксы jquery

Отметить все чекбоксы jquery

16.02.2013 09:28 Администратор Jquery
Печать PDF
Давно ни чего не писал по причине не хватки времени, к счастью сейчас нашел несколько минут. Сегодня я расскжу и покажу как отметить все нужные checkbox  на странице с помощью замечательного jquery. Пишу я это не просто так, а потому что на днях мне понадобилось реализовать именно эту возможность, а так как скрипт написан почему бы не выложить его сюда.

Тянуть не буду и прилагаю сразу рабочий скрипт который обсудим чуть ниже:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".all").click( function() {
if($(this).attr('checked')){
 $('.checkbox').attr('checked', true);
} else {
$('.checkbox').attr('checked', false);
}
});
});

</script>

<input type="checkbox" class="all"/><b>Отметить все</b><br />
<input type="checkbox" class="checkbox" name="cat[]" value="1" />Авто-юристы<br />
<input type="checkbox" class="checkbox" name="cat[]" value="2" />Авторское право<br />
<input type="checkbox" class="checkbox" name="cat[]" value="3" />Адвокатские услуги<br />
<input type="checkbox" class="checkbox" name="cat[]" value="4" />Административное право<br />
<input type="checkbox" class="checkbox" name="cat[]" value="5" />Амнистия<br />
<input type="checkbox" class="checkbox" name="cat[]" value="6" />Арбитраж<br />
<input type="checkbox" class="checkbox" name="cat[]" value="7" />Банкротство<br />
<input type="checkbox" class="checkbox" name="cat[]" value="8" />ВЭД<br />
<input type="checkbox" class="checkbox" name="cat[]" value="9" />Гражданское право<br />
<input type="checkbox" class="checkbox" name="cat[]" value="10" />Здравоохранение, образование<br />
<input type="checkbox" class="checkbox" name="cat[]" value="11" />Интернет<br />
<input type="checkbox" class="checkbox" name="cat[]" value="12" />Исполнительное производство<br />

Алгорит работы скрипта довольно прост. Отслеживаем клик по элементу с классом all, далее проверяем его атрибут checked и исходя из его значения (отмечен или не отмечен), отмечаем либо снимаем галочку с элементов имеющих класс checkbox. Данный скрипт работает замечательно и не глючит.

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var id=0;
$(document).ready( function() {
$(".all").click( function() {
if($(this).attr('checked')){
function checks(id){
++id;
if($('#ch'+id).length) {
$('#ch'+id).attr('checked', true);
$('#ch'+id).animate({"opacity": "1"}, 10, "linear", function(){checks(id);});
}
}
checks(id);
} else {
function nochecks(id){
++id
if($('#ch'+id).length) {
$('#ch'+id).attr('checked', false);
$('#ch'+id).animate({"opacity": "1"}, 10, "linear", function(){nochecks(id);});
}
}
nochecks(id);
}

});
});

</script>

<input type="checkbox" class="all"/><b>Отметить все</b><br />
<input type="checkbox" class="checkbox" id="ch1" name="cat[]" value="1" />Авто-юристы<br />
<input type="checkbox" class="checkbox" id="ch2" name="cat[]" value="2" />Авторское право<br />
<input type="checkbox" class="checkbox" id="ch3" name="cat[]" value="3" />Адвокатские услуги<br />
<input type="checkbox" class="checkbox" id="ch4" name="cat[]" value="4" />Административное право<br />
<input type="checkbox" class="checkbox" id="ch5" name="cat[]" value="5" />Амнистия<br />
<input type="checkbox" class="checkbox" id="ch6" name="cat[]" value="6" />Арбитраж<br />
<input type="checkbox" class="checkbox" id="ch7" name="cat[]" value="7" />Банкротство<br />
<input type="checkbox" class="checkbox" id="ch8" name="cat[]" value="8" />ВЭД<br />
<input type="checkbox" class="checkbox" id="ch9" name="cat[]" value="9" />Гражданское право<br />
<input type="checkbox" class="checkbox" id="ch10" name="cat[]" value="10" />Здравоохранение, образование<br />
<input type="checkbox" class="checkbox" id="ch11" name="cat[]" value="11" />Интернет<br />
<input type="checkbox" class="checkbox" id="ch12" name="cat[]" value="12" />Исполнительное производство<br />

В сам скрипт и в html я внес некоторые изменения. Теперь скрипт работает рекурсивно и отмечает последовательно все чек боксы. Для задания паузы я использовал функцию animate, больше она тут ничего не делает. Возможно это не так правильно и надо было использовать setTimeout или setInterval, но лично мне не нравится как они смотрятся с остальным кодом jquery. Скрипт можно написать конечно и получше, в таком случае нам не пришлось бы задавать инпутам id. Скрипт работает в Опере, Хроме, Мозиле, в IE не проверял, он у меня даже и не запускается.

Добавить комментарий


Защитный код
Обновить

Поиск

Голосование

Что Вы думаете на счет битрикса?