Как проверить выделенны ли все checkbox?

Question

[Денис Артемьев]

Здравствуйте, имеются checkboxы:

<input name="kat" value="1" type="checkbox" />
<input name="kat" value="2" type="checkbox" />
<input name="kat" value="3" type="checkbox" />
<input name="kat" value="4" type="checkbox" />

Формируются они из БД, и не хочется делать запрос, чтобы узнать их количество.

Интересует событие, возникающее при выделении всех checkbox'ов?
Или как сделать это через change на js или jquery?

Заранее спасибо за ответ.

Answer 1

[IceJOKER]

$(function(){
  var all_checkboxes= $(':checkbox').length;
  $(':checkbox').change(function(e){
    var checked_checkboxes = $(':checked').length;

   if(all_checkboxes == checked_checkboxes) alert('Thanks, dude');
  });
})

Comments

[Денис Артемьев]

Спасибо за ответ. Но что-то не срабатывает.
Пришла в голову мысль, может событие не работает, если checkbox меняется программно?
У меня есть div'ы, в них скрытые input'ы.
#all это кнопка выделить все... она работает. Если хотя бы один элемент убрать. То по событию ниже, я делаю кнопку выделить все элементы не активной: $("#all").removeClass("active_kat");

Событие при изменении div в которой находиться input:
$(kat).click(function() {
if($(this).hasClass("active_kat")) {
$(this).removeClass("active_kat");
$("#all").removeClass("active_kat");
$(this).find(":checkbox").removeAttr("checked");
} else {
$(this).addClass("active_kat");
$(this).find(":checkbox").attr("checked", "checked");
}
});

Мой вопрос в том, что если я выделяю все checkbox руками с помощью div, кнопка #all должна получить класс active_kat. Но не могу найти как сделать это событие.

[IceJOKER]

Денис Артемьев: лень читать все это да и в таком виде.
если элементы добавляются динамически, то вместо .change(); используйте метод $('body').on('change', ':checkbox', function(e){...}); //

[Денис Артемьев]

IceJOKER: спасибо. Заработало. Но только если выделить вообще все checkbox'ы на странице.

var all_checkboxes= $(':checkbox').length;
$('body').on('change', ':checkbox', function(e){
var checked_checkboxes = $(':checked').length;
if(all_checkboxes == checked_checkboxes) alert('Thanks, dude');
});

Как заменить :checkbox и :checked с учетом name или class?

Сейчас мои checkbox'ы я нахожу так: $(".kat").parent().find(":checkbox");

[IceJOKER]

Денис Артемьев: зачем так извращаться? неужели нельзя обрамить каким-нибудь div-ом?
в моем коде замените - $(':checkbox') на $(".kat").parent().find(":checkbox") и все , но событие change будет вызываться для всех checkbox-ов на странице, чтоб этого не произошло укажите в on() нужный селектор. я не знаю какая структура документа у вас

[Денис Артемьев]

Спасибо большое за помощь. Но из-за того что я изменял checkbox'ы программно событие не вызывалось, сделал через свое, в общем разобрался:) Еще раз спасибо.

[IceJOKER]

Денис Артемьев: you're welcome )