JQuery - страница с кучей флажков, как связать?

Question

У меня есть страница с флажками, в некоторых случаях более 100. Я сейчас делаю это:

$('form[name=myForm] input[name=myCheckbox]').change(function(){ 

    var numChkd = $('input[name=myCheckbox]:checked').size();

    console.log(numChkd);

};

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

Answer 1

Вы можете связать событие с родительским контейнером, который обернет все флажки, а затем проверить, является ли объект, вызвавший событие, флажком.Таким образом, вы привязываете только один обработчик событий.В jQuery вы можете использовать событие $ .live для этого.

Answer 2

Не пересчитывать каждый раз, когда меняется флажок.Просто используйте глобальную переменную, например:

var CheckboxesTicked = 0;

$(document).ready(function() {

  CheckboxesTicked = $(":checkbox:checked").length;

  $(":checkbox").change(function() {
    if ($(this).is(":checked")) {
      CheckboxesTicked += 1
    } else {
      CheckboxesTicked -= 1
    }
  });

});

Кстати, в документации говорится, что вам лучше использовать .length вместо .size () с точки зрения производительности.

Answer 3

Вот как я бы подошел:

$('form[name=myForm]').each(function() {
  var $form = $(this),
      $boxes = $form.find('input[name=myCheckbox]');

  $form.delegate('input[name=myCheckbox]', 'change', function() { 
    var numChkd = $boxes.filter(':checked').length;
    console.log(numChkd);
  });

});

Это использует преимущество кэширования выбора $boxes.Он будет искать все коробки, когда он настроит событие.Он использует .delegate(), чтобы прикрепить событие к form, которое будет срабатывать каждый раз, когда дочерний элемент input[name=myCheckbox] создает событие change.В этом обработчике событий вы можете легко отфильтровать уже полученный список флажков, по которым установлены :checked, и получить length соответствующих элементов.(Документация для .size() в основном утверждает, что нет никаких оснований когда-либо использовать его ... В любом случае, он просто возвращает this.length ...)

Смотрите эту скрипку1020 * для рабочей демонстрации

Answer 4

Вы должны использовать .delegate().Одна привязка на родительском элементе может заменить все отдельные привязки на дочерних элементах.Он идеально подходит для этой ситуации (а также решает проблему привязки поведения к динамически добавляемым элементам в случае необходимости).

$('form[name=myForm]').delegate('input[name=myCheckbox]','change', function(){
  var numChkd = $(this).siblings(':checked').length; // assuming siblings
  console.log(numChkd);
});

Answer 5

Вы можете создать элемент контейнера (например, Div без стилей) и прикрепить обработчик событий к контейнеру.Таким образом, когда событие change() происходит с одним из флажков и просачивается вверх по DOM, вы ловите его на уровне контейнера.Это один из способов сделать это быстрее.

Answer 6

демо: http://jsfiddle.net/kKUdm/

$(':checkbox').change(function(){
    if($(this).is(':checked')){
      var name = $(this).attr('name');
      var value = $(this).val();
      console.log(name + ':' + value);
    }
   });

Answer 7

Var $chks = $(":checkbox");
Var ChkCount =0;
Var chktimer =0;
Function updateChkCount(){
      ChkCount = $chks.filter(":checked").length;
      $chks.end();
       // do something witb ChkCount
}
$chks.bind("check change", function(){
      clearInterval(chktimer);
      chktimer = setInterval("updateChkCount()",250);
});