如何遍历具有相同类名的复选框组？答案

【问题标题】：How to loop through group of check boxes that have same class name?如何遍历具有相同类名的复选框组？
【发布时间】：2016-02-19 22:16:53
【问题描述】：

我有一个动态表格，其中包含带有复选框字段的表格单元格。这个字段是从数据库中填充的，所以我的表是动态的。我想根据他们的类名遍历复选框。在那个循环中，我想检查每个复选框的值。例如，如果值等于 1，我希望复选框被选中，如果不是未选中。 Alo 我不确定是否可能，但我想为每个复选框设置唯一 ID。由于我的表是动态的，因此我的字段需要具有唯一的 ID。这是我的代码示例：

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Time Slots</th>
            <th>Block</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>~(SLOT_LABEL)</td>
            <td>
                <span>
                <input type="checkbox" name="CF-[Events]" class="block" id="block_"+Value that will make this ID unique. value="~(SLOT_ID)"/>
                </span>
            </td>
        </tr>
    </tbody>
</table>

此外，在我使用的当前语言中，我必须使用 NAME 标记来从数据库中读取值。如果有人可以提供帮助，请告诉我。谢谢。

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

您可以使用属性选择器通过name 和value 检索元素。试试这个：

$('input[name="CF-[Events]"][value="1"]').prop("checked", true);

Working example

【讨论】：

可以用类名代替NAME标签来迭代吗？
你可以，$('input.block[value="1"]').prop("checked", true); 也可以。
我可以用 if/else 语句做到这一点吗？而不是在一个语句中这样做？
你可以，虽然它会比较多余和慢。
你能举个例子吗？我尝试使用 $(this).val() 但对我不起作用。

【解决方案2】：

如果您不想要 jQuery 解决方案，也可以使用 querySelector 获取这些元素：

var inputs = document.querySelectorAll("input.block");
for(var i = 0; i < inputs.length; i++) {
  inputs[i].checked = true;
}

【讨论】：

我想使用 CLASS 名称而不是 NAME 标签。

【解决方案3】：

你可以通过每个循环在 jquery 中做到这一点

$('.ClassName').each(function(i, o) {
    // o is object in your case checkbox    
    // i is index
    // your code
});

【讨论】：

我将如何根据值进行选中和未选中的框？

【解决方案4】：

$("input[name='CF-[Events]']").each(function() {
   if($(this).val() === "1")
   {
       $(this).prop("checked", true);
   }
});

【讨论】：

我可以用类名代替NAME标签吗？
查看 Rory 的回答 :)
当我尝试将您的示例与 $(this).prop("checked", true); 一起使用时如果我使用 $('input.block[value="1"]').prop("checked", true); 那就行不通了然后工作。你知道为什么吗？我问是因为我想设置 if/else 语句。
尝试$(this).val() === 1而不是“1”