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

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

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

Answer 2

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

有些事情需要注意:

• 而不是,.is(':clicked')或.is(':checked')使用this.checked.效率更高.
• jQuery中的事件处理程序有一个引用的参数event.你有2个key,value.这是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
        }
    });
}