Question

对于一点背景，我有多个复选框，每个复选框都有不同的“得分”。当复选框被更改时，我需要计算得分。我认为类似下面的内容会起作用，但它看起来并不像.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

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

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

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

为方便起见，请使用容器

示例HTML

<div id="checks">
    <input type="checkbox" id="chk1" />
    <input type="checkbox" id="chk2" />
    <input type="checkbox" id="chk3" />
    <input type="checkbox" id="chk4" />
</div>

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

$("#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"));
});

的 See this example on jsFiddle.

jQuery change event

:checked selector

.data

Answer 2

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

有些注意事项：

使用.is(':clicked')而不是.is(':checked')或this.checked。效率更高。
jQuery中的事件处理程序有一个引用event的参数。您有key,value的2。这使得处理程序中的key引用event对象而不是key中的$.each()。
在处理程序中，this指的是被点击的那个。
由于您对该元素有this引用，因此key中不需要$.each()的引用。你可以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 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
      }
    });
});

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

4 个答案: