迭代 JavaScript 中的所有复选框答案

【问题标题】：Iterate all checkbox in JavaScript迭代 JavaScript 中的所有复选框
【发布时间】：2014-03-26 06:25:01
【问题描述】：

在尝试迭代所有复选框并检查它是否被选中时，我遇到了一些困难。代码如下：

content = "<table class=\"filter-table\">";
content += "<tr><td><input class=\"pssLabel\" type=\"checkbox\" onclick=\"toggleOverlayer('pssLabel')\">Show Label</td></tr>" + 
            "<tr><td><div id=\"pss\"></div></td></tr>";
content += "<tr><td colspan=\"2\" style=\"padding:5px;font-size:15px;color:black;\">Development Type</td></tr>";
content += "<tr><td><input value='Commercial and Residential' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()' >Commercial and Residential</td><td><input value='Commercial' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()' >Commercial</td></tr>";
content += "<tr><td><input value='Heavy Vehicle Park' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Heavy Vehicle Park</td><td><input value='Hospital' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Hospital</td></tr>";
content += "<tr><td><input value='Hotel' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Hotel</td><td><input value='Industrial' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Industrial</td></tr>";
content += "<tr><td><input value='Industrial-White' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Industrial-White</td><td><input value='Office' class=\"pssCheckBox\"  type=\"checkbox\" onclick='queryPSS()'>Office</td></tr>";

这是我如何迭代所有复选框并执行检查：

function queryPSS() {
var type_filter = new Array();

//Iterate thru all checkbox
$(":checkbox").each(function(index, element) {
    if($(this).is(':checked'))       
    {
        type_filter.push($(this).val());            
    }
});

}

但是，我有什么办法可以跳过第一个复选框（无论是否选中）并检查其他复选框并存储到数组中。

提前致谢。

【问题讨论】：

就在你的.each() 回调中是index 参数，它可以让你测试它是否是第一个复选框。您还可以在要迭代的复选框上使用通用类名，然后只查询该类名。

标签： javascript jquery html checkbox

【解决方案1】：

只需添加一个简单的 if 条件，例如

if (index !== 0)

完整代码：

$("input:checkbox").each(function(index, element) {
    if (index !== 0) { //skip first checkbox
       if($(this).is(':checked')) {
        type_filter.push($(this).val());            
       }
     }
});

【讨论】：

【解决方案2】：

由于您将 pssLabel 类分配给您的第一个输入，您可以跳过该类的复选框：

$(":checkbox").each(function(index, element) {
    if($(this).hasClass('pssLabel')) return;

    if($(this).is(':checked'))       
    {
        type_filter.push($(this).val());            
    }
});

【讨论】：

也许在选择器中排除 .pssLabel 并且不打扰测试？

【解决方案3】：

你可以使用:gt(0)

$(":checkbox:gt(0)").each(function(index, element) {

--->https://api.jquery.com/gt-selector/

【讨论】：

或：...each(function(index, element) { if (index == 0) return true;...
当然谢谢。这种方法也有效。非常感谢！

【解决方案4】：

您只能定位具有pssCheckBox 类的复选框，因为第一个没有它。

function queryPSS() {
    var type_filter = $("input.pssCheckBox:checked").map(function (index, element) {
        return this.value;
    }).get();

}

也看看.map()的用法

【讨论】：

【解决方案5】：

是的，使用 .map() 喜欢上楼

var type_filter = $("input[name='instanceCheck']:checkbox:checked").map(function(index, element) {
        return this.value;
}).get();

这个回调是同步函数每个回调都是异步函数

【讨论】：