1

Есть код:

<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: как переписать по-другому этот код, чтобы работало правильно - понятно, спасибо за ответы. Осталась вторая часть вопроса: почему количество установленных чекбоксов при непосредственно клике и при имитации клика при вызове события клик для каждого чекбокса считается по-разному?

3
  • все дело именно во времени установки значения checked. я обновил свой ответ, добавил тест. вообще с каждым днем удивляешься некоторым странностям все больше))) 3 сен 2011 в 12:01
  • @xhr Чтобы код отформатировался надо выделить его целиком мышью и нажать кнопку 101010 или добавить четыре пробела (табуляцию) перед каждой строкой в вашем редакторе перед вставкой. 3 сен 2011 в 14:14
  • @Павел Азанов Респект!
    – xhr
    3 сен 2011 в 16:43

4 ответа 4

2

Не вижу смысла имитировать клики по checkbox-ам. Все гораздо проще:

var count = 0; 
$(function() { 
     updateCount(); 
     $('input[type=checkbox]').change(function() { 
           updateCount(this.checked ? 1 : -1); 
     });
     $('#invert').click(function(e) { 
           e = $('input[type=checkbox]');
           e.each(function(i, el) {
                 el.checked = !el.checked;
           });
           updateCount(e.length - count - count);
     }); 
}); 
function updateCount(a) {
     count = a ? count + a : $('input[type=checkbox]:checked').length;
     $('#count').text(count);
}

Дополнительно: Возможный вариант исправления Вашего кода: (полностью рабочий вариант)

var count = 0;
$(function() {
    count = $('input[type=checkbox]:checked').length;
    displayCount();  

    $('input[type=checkbox]').bind('click' , function(e, a) {   
         if (this.checked) {
              count += a ? -1 : 1;
         } else {
              count += a ? 1 : -1;
         }
         displayCount();
    });
    $('#invert').click(function(e) {    
         $('input[type=checkbox]').trigger('click', true)
    });
});
function displayCount() {
    $('#count').text(count);
}

т.е. приняли за истину, что при "имитации" события клик, флажок еще не успевает изменить свое состояние и используете это...

Дабы подтвердить теорию сделал небольшой тест:

alt text

7
  • ну, с "все гораздо проще" не соглашусь. Не проще - примерно одинаково. Скорее, даже мой код чуть проще - но мой не работает (и я хочу понять почему, мне кажется, что должен бы работать), а ваш работает :)
    – xhr
    3 сен 2011 в 8:56
  • по-идее, почему бы не имитировать клики? "кнопка" invert вызывает событие click для каждого чекбокса, как будто бы пользователь сам прошелся и кликнул по каждому - что может быть естественней? :) Вот только количество установленных флажков почему-то считается по-разному ...
    – xhr
    3 сен 2011 в 8:59
  • мне кажется имитировать клики не так элегантно. да и скорость выполнения ниже.. + представьте себе, что у вас при клике вызывается еще и какой-нибудь другой метод, который не нужно вызывать при инвертировании. 3 сен 2011 в 9:06
  • мне бы как раз получить полную имитацию клика :) т.е., чтобы при имитации клика (при инвертировании) элегантно вызывалось все, что и при обычном клике :) насчет скорости - у меня в группах никогда не будет больше, чем 50 чекбоксов, т.е. даже если предположить, что такой способ работает медленнее - он не будет настолько медленнее, чтобы это можно было измерить :)
    – xhr
    3 сен 2011 в 9:16
  • я добавил возможный вариант исправления Вашего кода с использованием метода trigger и передачей дополнительного параметра. Но причину назвать не могу. Судя по всему есть разница во времени привоения свойства checked при обычном событии клика, и его программной имитацией 3 сен 2011 в 9:17
1

Сдается, что у вас косяк из-за e.preventDefault(); и самого параметра "е", который непонятно откуда должен передаваться. Могу посоветовать переписать вот так, но не понятно, зачем вам клик по всем инпутам:

$('#invert').click(function(){
    $('input[type=checkbox]').each(function(){
        $(this).click();
    });

});

5
  • нет, не из-за preventDefault. В свою очередь могу посоветовать почитать мануал: api.jquery.com/event.preventDefault чтобы стало понятно откуда передается параметр "e"
    – xhr
    3 сен 2011 в 6:30
  • зачем мне "клик по всем инпутам"? Чтобы инвертировать состояние всех чекбоксов в один клик (что видно из названия ссылки "invert", которая запускает это событие)
    – xhr
    3 сен 2011 в 6:33
  • и этот способ работает точно также, как и мой код (на всякий случай я даже проверил) :)
    – xhr
    3 сен 2011 в 6:38
  • Черт, ну я даже не знаю в чем тогда может быть дело! Прошу прощения за ложную попытку помочь)
    – metazet
    3 сен 2011 в 7:01
  • все равно спасибо :)
    – xhr
    3 сен 2011 в 8:32
0

А что мешает использовать .length?

$('input[type=checkbox]:checked').length

-это и будет количество выбранных. В вашем случае, при иммитации клика, незнаю как поведет себя))

4
  • в принципе да, можно. В конце каждого события клик я могу вызывать функцию, которая подсчитывает количество "включенных" чекбоксов. Это немного неудобно в моем случае, т.к. тестовый пример максимально упрощен, чтобы только показать проблему, а в реальности групп чекбоксов у меня не одна и так немного больше все заморочено. Будет немного больше кода, но работать будет. Это вариант. Спасибо :) Но еще очень бы хотелось понять почему возникает эта разница в подсчете. Я вот, честно говоря, не понимаю, а наверное надо :) ...
    – xhr
    3 сен 2011 в 8:23
  • нет, кстати, так не получается ... если вызывать функцию подсчета чекбоксов в конце каждого обработчика клик, она тоже показывает неверное значение, т.е. похоже, состояние чекбокса на момент ее вызова обновиться еще не успевает
    – xhr
    3 сен 2011 в 10:08
  • По-моему, все дело в иммитации кликов. Наверное надо не иммитировать клики, а явно указывать состояние чекбокса, то есть указать явно, если он CHECKED,то нужно UNCHECK, и наоборот... думаю так... имитация клика - непредсказуема 3 сен 2011 в 11:18
  • что значит "не надо имитировать клики"? тут просто программно вызывается обработчик события - это совершенно обычное дело. И по-идее поведение обработчика не должно вообще никак зависеть от способа его запуска. Логично?
    – xhr
    3 сен 2011 в 12:45
0

var $formFilters = $('.form-filters'),$count = 0;
$formFilters.on('change', function () {
    $count = $(this).find('input[type=checkbox]:checked').length;
     $('#count').text($count);
});
#count{
background: black;
color: white;
display:block;
padding: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<title></title>
</head>
<body>

<span id="count">0</span><br>
<form class="form-filters">
<label><input id="x1" type="checkbox"> - checkbox 1 </label><br>
<label><input id="x2" type="checkbox"> - checkbox 2 </label><br>
<label><input id="x3" type="checkbox"> - checkbox 3 </label>
</form>

</body>
</html>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.