Question

所以基本上我的页面上有一堆复选框：

<input type="checkbox" id="check" name="1">
<input type="checkbox" id="check" name="2">
<input type="checkbox" id="check" name="3">

现在我需要一个javascript代码来检测是否已选中复选框，然后根据名称执行某些操作，我有：

$('#check').click(function()...

但是这只会处理一个复选框，如果我有多个像上面这样的话，则不起作用。我可能会有很多这样的，所以我不想一个一个地检查它们，任何帮助都会非常感谢，谢谢你们！

Answer 1

您正在使用id绑定click，并且所有三个控件都具有相同的ID。您需要为html控件提供唯一ID，您最好指定一个公共类来对它们进行分组。我已经更改了复选框的ID以使它们成为唯一的。

<input type="checkbox" id="check1" name="1" class="someclass">
<input type="checkbox" id="check2" name="2" class="someclass">
<input type="checkbox" id="check3" name="3" class="someclass">


$('.someclass').click(function()...

选中已选中的复选框

Live Demo

$('#btn').click(function() {
    $('.someclass').each(function() {
       alert("checkbox id =" + this.id + " checked status " + this.checked);
    });
});

要在更改其他复选框时选中一组复选框

<强> Live Demo

<input type="checkbox" id="check1" name="1" class="someclass">
<input type="checkbox" id="check2" name="2" class="someclass">
<input type="checkbox" id="check3" name="3" class="someclass">
<label> <input id="chkall" type="checkbox" text=""aa /> check all </label>


$('#chkall').click(function() {
    $('.someclass').attr('checked', this.checked);
});

Answer 2

但是只处理一个复选框，如果我有更多，则不起作用比上面的那个。

这是因为当使用id选择器时，jQuery只返回它找到的第一个元素。 ID应该是唯一的。

根据documentation：

每个id值只能在文档中使用一次。如果超过一个元素已分配相同的ID，使用该ID的查询只会选择DOM中第一个匹配的元素。这种行为但是，不应该依赖;包含多个文档的文档使用相同ID的元素无效。

如果您需要对元素进行分组，您可以指定一个类：

<input type="checkbox" id="check1" class="checkbox-group1">
<input type="checkbox" id="check2" class="checkbox-group1">
<input type="checkbox" id="check3" class="checkbox-group1">

...附加按类选择的点击事件：

$('.checkbox-group1').click(function(){...})

或者您可以使用数据属性：

<input type="checkbox" id="check1" data-group="checkbox-group1">
<input type="checkbox" id="check2" data-group="checkbox-group1">
<input type="checkbox" id="check3" data-group="checkbox-group1">

...附加按数据属性选择的点击事件：

$('input[data-group="checkbox-group1"]').click(function(){...})

DEMO

Answer 3

标记无效（正如markup validator会告诉您）：id属性值在文档中必须是唯一的。对于复选框，id属性主要用于将控件与其标签相关联，如<input type="checkbox" id="sugar" name="addon" value="sugar"><label for="sugar">Sugar</label>。

所以你需要别的东西来引用你的复选框。要引用页面上的所有复选框，您可以使用$('input[type=checkbox]')。但是，如果您希望以某种方式处理一组特定的复选框，最自然的方式可能是使用相同的name属性，比如说

<input type="checkbox" name="addon" value="sugar">
<input type="checkbox" name="addon" value="cream">
<input type="checkbox" name="addon" value="milk">

并使用$('[name=addon]')。请注意，在此方法中，提交的数据将包含addon = sugar，addon = cream等字段，而不是像1 = on，2 = on等字段，这是使用name而不是{{{ 1}}。

多个复选框javascript检查状态检测

3 个答案:

DEMO