Question

考虑一个简单的每个循环来检查已选中的复选框：

$(':checkbox').filter(':checked').each(function(){
    var name = $(this).val();
});

此代码适用于在原始HTML代码中选中的复选框

<input type="checkbox" name="test" value="test" checked="checked" />

如何使这个jQuery代码实时工作，每次检查新框或删除选中时执行filter进程。我想在复选框（已选中或未选中）中的任何更改时运行每个循环，以返回当前已检查的更新值。

注意：这是表达问题的简化代码。目的不是记录name，而是在each循环中处理选中的值。

Answer 1

您需要将循环绑定到change event以获取复选框。

$(':checkbox').change(function() {
    $(':checkbox').filter(':checked').each(function() {
        var name = $(this).val();
    });
});

Answer 2

使用click：

$(':checkbox').click(function() {
    $(':checkbox').filter(':checked').each(function() {
        var name = this.value;
    });
});

备注：

您可以避免多次查询DOM。

:checkbox是一个非常慢的选择器，因为它不是css选择器而是jQuery扩展。

不要使用jQuery获取this值。

您可以像这样改进代码：

var $checkboxes = $('input[type="checkbox"]'); $checkboxes.filter(':checked').each(function() { var name = this.value; });

阅读资源：

The cost of $(this)

Why we prefix our variables with $ in jQuery

Answer 3

由于您正在执行循环，我假设可以有许多复选框。我有点困惑，为什么你每次都会覆盖name变量，只留下最后一个复选框的值。相反，我提供了一个数组，我们将所有选中的值推送到：

// Declare a names variable for storing values
var names;

// Any time a checkbox changes on our form
$("form").on("change", ":checkbox", function(e){
  // Empty the names array
  names = [];
  // Get all checked checkboxes from our form and add their value to our array
  $(":checkbox:checked", e.delegateTarget).each(function(){
    names.push( $(this).val() ); 
  });
}).find("input:checkbox").trigger("change");

// Method of revealing what we currently have checked
$("#reveal").on("click", function(){
  alert( names.join(", ") );
});

演示：http://jsbin.com/uyecux/2/edit

Answer 4

您需要创建一个事件处理程序。在jQuery中，这可能如下所示：

$(':checkbox').on('change', function() {
  // Execute your code here.
});

有关jQuery中事件处理的更多详细信息，请参阅此处的jQuery文档：http://api.jquery.com/on/。

Answer 5

var $checkboxes = $('input[type=checkbox]')  
$checkboxes.click(function (){  
    $(':checkbox').filter(':checked').each(function(){
        var name = $(this).val();
    });
});

尝试使用上述功能。

如何检查每个循环中的复选框

5 个答案: