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

How to check checkbox in each loop

本文关键字：复选框 循环 何选中      更新时间：2023-09-26

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

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

此代码适用于在原始 HTML 代码中选中的复选框，如下所示 

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

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

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

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

阅读资源：

  • $(this)的成本
  • 为什么我们在 jQuery 中用 $ 作为变量的前缀
您需要

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

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

由于您正在执行循环，因此我假设可以有很多复选框。我有点困惑为什么您每次都会覆盖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

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

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

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

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

尝试使用上述功能。

相关文章：