Question

我一直试图让一个复选框检查多个嵌套div中的其他复选框，但它不起作用。我找不到复选框的Dom路径。这是html：

<div class="box span12 " id="Clarendon_region"> 

    <div class="box-content">
        <div class="row-fluid">         
            <div class="span3 ">
                <span>
                    <div class="checker">
                        <span>
                            <input type="checkbox">
                        </span>
                    </div>
                </span> Branch 115
            </div>
        </div>
    </div>

</div>

这里是jquery：

$('span input').click(function(e){

    var elIDSplit = e.target.id.split("_");

    if(elIDSplit[0] == "chk" && elIDSplit[2] == "region") {
        //alert(e.target.id);
        status = $(e.target).attr("checked");
        if (status == undefined) {
            status = false;
        }

        $(elIDSplit[1]+"_"+elIDSplit[0]+" .box-content .row-fluid .span3 span .checker span input:checkbox.friends").attr("checked",status);

    }

});

更新：这是通过给输入一个类名来解决的，然后使用它来调用：

$(".allbranches_" + elIDSplit[1]).attr('checked', status);
//does not work without this line since uniform is responsible for styling the  checkbox
$.uniform.update();

Answer 1

您的代码中存在各种错误。这一行：

$(elIDSplit[1]+"_"+elIDSplit[0]+" .box-content .row-fluid .span3 span .checker span input:checkbox.friends").attr("checked",status);

实际应该是（用你的方法）：

$("#" + elIDSplit[1]+"_"+elIDSplit[2]+">.box-content>.row-fluid>.span3>span>.checker>span>input:checkbox.friends").attr("checked", status);

只要您在输入代码中添加了正确的id和class，就可以使用它，而您在此处显示的代码中没有这样做。

然而，这是选择元素的一种可怕方式（说实话，这是一种非常奇怪的嵌套方式）。例如，如果您为input代码添加了有意义的ID，并使用$("#my_input")之类的内容选择它们，那就容易多了。

即使你不能，通常也不需要级联所有选择器：你可以只做

$("#" + elIDSplit[1]+"_"+elIDSplit[2]+">.box-content input:checkbox.friends").attr("checked", status);

你会得到相同的结果。

选中嵌套div中的所有复选框

1 个答案: