Есть код:
<head>
<title>*</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<body>
<span id="count"></span>
<input id="x1" type="checkbox">
<input id="x2" type="checkbox">
<input id="x3" type="checkbox">
<a id="invert" href="#">invert</a>
<script type="text/javascript">
var count = 0;
$(function() {
displayCount();
$('input[type=checkbox]').click(function() {
if (this.checked) {
count++;
} else {
count--;
}
displayCount();
});
$('#invert').click(function(e) {
e.preventDefault();
$('input[type=checkbox]').click();
});
});
function displayCount() {
$('#count').text(count);
}
</script>
</body>
</html>
Это рабочий пример, можно сохранить у себя и запустить. Нужно посчитать сколько чекбоксов отмечено. При клике по чекбоксу вызывается событие onclick, которое меняет значение счетчика в глобальной переменной. Тут все ок. Клик на "кнопке" invert вызывает события клик для всех чекбоксов, но вот здесь уже количество отмеченных чекбоксов считается неправильно. Почему-то при обработчик события клик для чекбокса по разному считает состояние флажка.
Подскажите как исправить этот косяк. И более интересный вопрос почему возникает эта разница? - Имхо, по-идее должно работать одинаково ...
upd: обновил код - заменил а на span, чтобы он адекватно отображался тут и его можно было сразу скопировать, сохранить у себя и выполнить.
upd2: как переписать по-другому этот код, чтобы работало правильно - понятно, спасибо за ответы. Осталась вторая часть вопроса: почему количество установленных чекбоксов при непосредственно клике и при имитации клика при вызове события клик для каждого чекбокса считается по-разному?