javascript - 找到所有 parent 并在 TreeView 中检查他们？

Question

我在这个页面上使用这段代码:http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html

我的问题是它希望选择反向进行。也就是说，勾选框内的所有 parent 而不是 child 。

例如，在上面的链接中，如果您单击我的文档，我希望同时选中文档 和库。

我试过使用 parents() 和 parent().parent().prev().prev() 的多个版本，我想出的唯一有点实用的是:

$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
    var
    checkbox = $(this),
    nestedList = checkbox.parent().parent().parent().prev().prev(),
    selectNestedListCheckbox = nestedList.find("input:checkbox");

    if(checkbox.is(":checked")) {
        return selectNestedListCheckbox.prop("checked", true);
    }
    selectNestedListCheckbox.prop("checked", false);
});

这只会选择第一个 parent ，而我需要所有 parent 。我想我可以构造一个循环来继续使用同一个脚本，但它看起来非常难看。

什么是做我正在寻找的事情的更简洁的方法？

Answer 1

您可以使用 jQuery 的 parents() 来做到这一点方法，然后检查直接子节点的输入。您可能需要根据 html 的布局修改它。我已经用 jsfiddle 证明了这一点.

关键部分是:

var checkboxes = $this.parents().children('input');

完整:

$('input').on('change', function() {
    var $this = $(this);
    var checkboxes = $this.parents().children('input');
    if($this.is(":checked")) {
        return checkboxes.prop("checked", true);
    }
    checkboxes.prop("checked", false);
});