基于ids和jquery的checed复选框

Question

我试图做这样的事情： http://jsfiddle.net/WFXun/

但是在点击时不是fadeout复选框，我想在页面加载时只标记由id（var ids = [2,3,5,6];）定义的复选框。

我正在尝试这个并且它不起作用：

$("#set_1").load(function(){
     var ids = [2,3,5,6];
        for(i=0;i<ids.length;i++){
            $("#set_"+ids[i]).prop("checked", true);
    }
})

Answer 1

这不是你想要的负担

$("#set_1").load(function(){

用于使用Ajax请求加载内容。

您希望绑定到窗口加载或文档就绪。

$(window).load( function() {
  ids.forEach( function (id) {
    $("#set_"+id).prop("checked", true);
  });
});

Answer 2

查看JavaScript控制台会显示您的问题。

1. 您想使用$().click，而不是$().load。
2. 链接小提琴不支持$().prop，因此必须将其更改为.attr或使用较新的jQuery版本。

此代码有效：

$("#set_1").click(function(){
     var ids = [2,3,5,6];
        for(var i=0;i<ids.length;i++){
            $("#set_"+ids[i]).attr("checked", true);
    }
})

这也是您问题的替代解决方案：

＆＃13;
＆＃13;
var idMap = {
    1: [2, 3, 5, 6],
    2: [4, 7]
};

function onClick(id, idsToToggle) {
    var checked = $("#set_" + id).prop("checked");
    idsToToggle
        .map(function(id) { return $("#set_" + id); })
        .forEach(function(el) { el.prop("checked", checked) });
}

$(function() {
    Object.keys(idMap).forEach(function(id) {
        $("#set_" + id).click(onClick.bind(this, id, idMap[id]));
    });
});
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><input type="checkbox" id="set_1">checkbox 1</p>
<p><input type="checkbox" id="set_2">checkbox 2</p>
<p><input type="checkbox" id="set_3">checkbox 3</p>
<p><input type="checkbox" id="set_4">checkbox 4</p>
<p><input type="checkbox" id="set_5">checkbox 5</p>
<p><input type="checkbox" id="set_6">checkbox 6</p>
<p><input type="checkbox" id="set_7">checkbox 7</p>
＆＃13;
＆＃13;
＆＃13;

如果您决定添加更多复选框映射，则可以让您拥有更大的灵活性，只需编辑idMap即可。