Optimization jQuery-带有大量复选框的页面，如何绑定？

我有一页复选框，有时超过100个。我目前正在这样做：

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

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

    console.log(numChkd);

};

但正如你所能想象的，这会变得非常缓慢。是否有更好的方法将事件绑定到多个元素？这很有效，但我想知道是否有更好的方法？

演示：

---

您可以将事件绑定到父容器，该容器将包装所有复选框，然后检查导致事件的对象是否为复选框。这样，您只能绑定一个事件处理程序。在jQuery中，您可以使用$.live事件进行此操作。

您可以创建一个容器元素（如没有样式的Div）并将事件处理程序附加到容器。这样，当其中一个复选框上发生

change（）

事件并过滤DOM时，您将在容器级别捕获它。这是加快速度的一种方法。

不要每次复选框更改时都重新计算。只需使用全局变量，如下所示：

var CheckboxesTicked = 0;

$(document).ready(function() {

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

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

});

顺便说一句，文档中指出，在性能方面，最好使用.length而不是.size（）。父元素上的一个绑定可以替换子元素上的所有单个绑定。它非常适合这种情况（并且还解决了在需要时将行为附加到动态添加的元素的问题）

---

我会这样做：

$('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);
  });

});

这利用了缓存

$box

选择的优势。它将在设置事件时查找所有框。它用于将事件附加到

表单

，每当子

输入[name=myCheckbox]

创建

更改

事件时，就会触发该事件。在这个事件处理程序中，您可以很容易地筛选已获得的复选框列表，通过这些复选框可以选中

：并获得匹配元素的
长度。（的文档基本上说明没有理由使用它…它只返回
this.length
无论如何…）

对于正在运行的演示
如果
$（this）.size（）
实际返回复选框的数量，我会非常惊讶。它应该总是返回
1
，因为
change
处理程序在单个DOM元素的上下文中运行。。。您需要
$（'input:checkbox:checked'）。length
is（）
返回一个布尔值，因此无法对其调用
size（）
。您可能正在查找
filter（）
，但
$（此）
无论如何只包含一个元素，因此也不起作用。听@gnarf:）太棒了，我使用过live，但只是为了绑定到将来的元素（通过ajax加载）。我很内疚，因为我从来没有看过代表，所以这一切都很完美。另外，+1 gnarf感谢您的链接。
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);
});

$('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);
  });

});

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);
});