Подсчет cheked у checkbox

Вопрос-ответ JavaScript
1

Помогите пожалуйста, нужно чтоб подсчет кликнутых чекбоксов в каждом блоке считался отдельно, т.е., если в одном блоке мы выделили 3 чекбокса, то в нем он вывел число 3, а другой вообще не трогал.

Сейчас реализация такая, что checkbox - cheked считается общий и вывод общее число, для 2 блоков
HTML разметка

<div class="sorting-item dropdown"><span class="mobile-title">Бренды</span><span class="dropdown-toggle desktop-title sort-type-span" href="#" role="button" data-toggle="dropdown">Бренды<span class="count-checked"></span></span>
                      <div class="dropdown-menu sorting-block-dropdown">
                        <div class="sort-block-brend">
                          <ul>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-cupboard"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Шкафы</span>
                                </label>
                              </div>
                            </li>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-tables"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Столы</span>
                                </label>
                              </div>
                            </li>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-tables-2"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Столы для 2-ух детей</span>
                                </label>
                              </div>
                            </li>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-curbstones"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Тумбы</span>
                                </label>
                              </div>
                            </li><a id="invert" href="#">invert</a>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="sorting-item dropdown"><span class="mobile-title">Бренды</span><span class="dropdown-toggle desktop-title sort-type-span" href="#" role="button" data-toggle="dropdown">Бренды<span class="count-checked"></span></span>
                      <div class="dropdown-menu sorting-block-dropdown">
                        <div class="sort-block-brend">
                          <ul>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-cupboard"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Шкафы</span>
                                </label>
                              </div>
                            </li>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-tables"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Столы</span>
                                </label>
                              </div>
                            </li>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-tables-2"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Столы для 2-ух детей</span>
                                </label>
                              </div>
                            </li>
                            <li>
                              <div class="form-checkbox">
                                <label>
                                  <input class="checkbox-involux" type="checkbox" name="checkbox-curbstones"/><span class="checkbox-custom checkbox-custom-filter"></span><span class="label">Тумбы</span>
                                </label>
                              </div>
                            </li><a id="invert" href="#">invert</a>
                          </ul>
                        </div>
                      </div>
                    </div>

JS

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() {
    if (count == 0) {
        $('.count-checked').hide();
    }
    else {
        $('.count-checked').show();
        $('.count-checked').text(count);
    }
}
2

  1. Если у Вас 2 блока и считаться они должны раздельно, то и переменных count у Вас так же должно быть как минимум 2 для каждого из них.

  2. Та же самая проблема и с обработчиком событий: он у Вас “навешен” на все checkboxes из обеих групп. Тут два варианта:
    2.1. Создать 2 отдельных обработчика для каждой группы;
    2.2. Создать один обработчик, который менял бы определенную переменную count;
    В Вашем случае вариант 2.2. предпочтительнее т.к. логика обработчика абсолютно одинаковая, разница только в переменной, которую он затрагивает.

  3. Рекомендации по коду:
    3.1. Не используйте глобальные переменные (count, displayCount);
    3.2. Сохраните (закешируйте) jQuery-елементы в переменных в начале функции:
    3.3. Используйте .on вместо .bind при создании обработчика событий;
    3.4. Используйте событие change вместо click;

$(function() {
    var count1 = 0;
    var count2 = 0;

    var checkboxes = $('input[type=checkbox]');
    var invertBtn = $('#invert');
    var countLabel = $('.count-checked');

    checkboxes.on('change', function() {
        count1 += this.checked ? 1 : -1;
        // ...
    });
}

Дальше попробуйте сами.

3

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

$(document).ready(function(){
  $(".sorting-item").click(function () {
    var count = $(this).find('input[type=checkbox]:checked').length;
    if ($(this).find('input[type=checkbox]:checked').length == 0) {
      $(this).find(".count-checked").hide();
    }
    else {
      $(this).find(".count-checked").show().text(count);
    }
  });
  $('.invert').click(function(e) {
    $(this).closest('.sorting-block-dropdown').find('input[type=checkbox]').trigger('click', true);
    });
});
4

Раз уже такое дело, то лучше так. .sorting-item - это блок-обертка над группой checkbox’ов?