Jquery：将更改绑定到多个复选框

对于一点背景，我有多个复选框，每个复选框都有不同的“分数”。 当复选框被更改时，我需要计算分数。 我认为类似下面的内容会起作用，但它看起来并不像.change事件被正确绑定。

$(document).ready(function() { bindSomeCheckboxes(); }); function bindSomeCheckboxes() { var score=0; var checkboxes = { "id_1" : 3, "id_2" : 1, "id_3" : 2, "id_4" : 5 }; $.each(checkboxes, function(key, value) { $("#"+key).change(function(key,value) { if ($("#"+key).is(':checked')) { //add this ids value to score } else { //subtract value from score } }); }); } 

我知道它正在循环遍历数组，但是.change中的警报永远不会被看到。

Answer 1

如果你真的想采用这种方法来使用ID，我会创建一个单独的ID数组，然后执行.join()来创建选择器。

有些事情需要注意：

• 而不是.is(':clicked')或.is(':checked') ，请使用this.checked 。 效率更高。
• jQuery中的事件处理程序有一个引用该event参数。 你有2个key,value 。 这使得处理程序中的key引用该event对象而不是$.each()中的key 。
• 在处理程序内部， this指的是被单击的处理程序。
• 因为您对元素有this引用，所以您不需要在$.each()引用key 。 你可以这样做this.id 。

---

 function bindSomeCheckboxes() { var score=0; var checkboxes = { "id_1" : 3, "id_2" : 1, "id_3" : 2, "id_4" : 5 }; var arrayOfIds = []; // to store array of ids $.each(checkboxes,function(key, val) { // populate array with ids arrayOfIds.push( key ); }); // create a selector of the IDs $( "#" + arrayOfIds.join(',#') ).change(function() { // alert the score alert( checkboxes[ this.id ] ); if ( this.checked ) { //do something when it is checked } else { //do something else } }); } 

Answer 2

我建议您添加容器并一次选中所有复选框。

至于你的问题，事件的签名是错误的，正确的是function(e){} 。 此外，您必须检查元素是否已选中，而不是单击。

 $("#chk").change(function(e){ if ($(this).is(":checked")) alert("checked"); else alert("not checked"); }); 

为方便起见，请使用容器

示例HTML

对于分数，我更喜欢在元素上设置数据，例如：

 $("#chk1").data("Score", 3); $("#chk2").data("Score", 1); $("#chk3").data("Score", 2); $("#chk4").data("Score", 5); $("#checks :checkbox").change(function(e){ if ($(this).is(":checked")) alert("checked Score: " + $(this).data("Score")); else alert("not checked Score: " + $(this).data("Score")); }); 

• 在jsFiddle上查看此示例。
• jQuery更改事件
• ：选中选择器
• 。数据

Answer 3

我建议以更自然的方式获取复选框…

 $("input[type='checkbox']").change(function () { alert("Event is bound"); }); 

如果要限制使用哪个复选框，可以添加一个类，但如果可以避免添加不必要的类，则html将更清晰。

Answer 4

尝试使用’bind’和’：checked’

 $.each(checkboxes, function(key, value) { $(this).bind('change', function() { if ($(this).is(':checked')) { //do something when it is checked } else { //do something else } }); });