Question

我有以下HTML

<input id="Option1" name="Option1" type="checkbox" value="..." />
<input id="Option2" name="Option2" type="checkbox" value="..." />
<input id="Option3" name="Option3" type="checkbox" value="..." />
..........................
..........................
<input id="OptionN" name="OptionN" type="checkbox" value="..." />

其中N可以是1到500之间的任何数字。

我想写一个单击事件（jquery / JavaScript），所以当用户点击任何复选框时，应调用此方法。

Answer 1

将MyClass类添加到复选框

<input id="Option1" name="Option1" type="checkbox" class="MyClass" value="..." />
<input id="Option2" name="Option2" type="checkbox" class="MyClass" value="..." />
<input id="Option3" name="Option3" type="checkbox" class="MyClass" value="..." />

并使用以下代码

$(".MyClass").on("click", function(){
    // Do stuff
})

Answer 2

如果您无法为元素设置公共名称或类，则可以使用jQuery Attribute Starts With Selector。

$('input[type="checkbox"][id^="Option"]').on('click', function(){
    // Do stuff
})

Answer 3

鉴于您的标记以及您的输入周围是否有表格：

$("form").on("click", "input[name^='Option'])", function(e) {
    console.log(e);
});

Answer 4

非常流行的错误：id必须是唯一的。如果要定位元素的数量（类），则应使用class：

<input id="Option1" class="option" name="Option1" type="checkbox" value="..." />
<input id="Option2" class="option" name="Option1" type="checkbox" value="..." />

JS：

$('.option').click(function() { ... });

Answer 5

当我点击一个按钮时我就把它移到桌子上我可以删除它所以对于你的问题，我认为首先将你的输入复选框放在DIV中并给它一个id

并且您为每个输入提供相同的类名

   <div id="div_id">
       <input id="Option1" name="Option1" type="checkbox" class="input_class" value="..." />
       <input id="Option2" name="Option2" type="checkbox" class="input_class"  value="..." />
       <input id="Option3" name="Option3" type="checkbox" class="input_class"  value="..." />
        ..........................
        ..........................
       <input id="OptionN" name="OptionN" type="checkbox" class="input_class"  value="..." />
   </div>

所以使用JQuery你可以这样做：

$("#div_id").on('click', '.input_class', function() {
    alert($(this).attr("id"));         
});

希望代码的和平可以帮助你：D

Answer 6

您可以使用基于ID 开头 - 选择器。

$("[id^='Option']").change(function(){

    //your function

})

带有Id选项的N个元素的jQuery单击事件

6 个答案: