1

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

<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()...

但这只处理一个复选框，如果我有多个像上面这样的复选框，它就不起作用。我可能会有很多，所以我不想一一检查，任何帮助将不胜感激，谢谢大家！

4

3 回答 3

4

您正在将点击与 id 绑定，并且所有三个控件都具有相同的 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()...

检查选中的复选框

现场演示

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

在更改其他复选框时检查一组复选框

现场演示

<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);
});​
于 2012-10-27T07:07:24.103 回答
1

But that only handles one checkbox and doesn't work if I have more than one like above.

That is because when using the id selector, jQuery only returns the first element it finds. Ids should be unique.

As per documentation :

Each id value must be used only once within a document. If more than one element has been assigned the same ID, queries that use that ID will only select the first matched element in the DOM. This behavior should not be relied on, however; a document with more than one element using the same ID is invalid.

If you need to group elements you can either assign a class:

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

...attaching the click event selecting by class:

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

or you can use data attributes:

<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">

...attaching the click event selecting by data attribute:

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

DEMO

于 2012-10-27T07:11:40.977 回答
0

标记无效（正如标记验证器会告诉您的那样）：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 等字段，这是您使用namewithout时得到的value。

于 2012-10-27T07:45:26.557 回答