1

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

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

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

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

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

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

4

5 回答 5

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

阅读资源：

于 2012-05-20T01:16:28.020 回答
1

您需要将循环绑定到复选框的change事件。

$(':checkbox').change(function() {
    $(':checkbox').filter(':checked').each(function() {
        var name = $(this).val();
    });
});
于 2012-05-20T01:09:35.867 回答
1

由于您正在执行循环，我假设可以有许多复选框。我有点困惑为什么你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

于 2012-05-20T01:29:24.237 回答
0

您需要创建一个事件处理程序。在 jQuery 中，这可能看起来像这样：

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

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

于 2012-05-20T01:10:48.780 回答
0 
var $checkboxes = $('input[type=checkbox]')  
$checkboxes.click(function (){  
    $(':checkbox').filter(':checked').each(function(){
        var name = $(this).val();
    });
});

尝试使用上述功能。

于 2012-05-20T01:13:20.997 回答