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

您可以创建一个容器元素（如没有样式的Div）并将事件处理程序附加到容器中。这样，当change()事件发生在其中一个复选框上并渗透DOM时，您将在容器级别捕获它。这是让这更快的一种方法。

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

这就是我接近它的方式：

$('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 ...）

See this fiddle了解工作演示

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

jQuery - 包含大量复选框的页面，如何绑定？

7 个答案: