Question

我正在使用jquery创建一个带复选框的json树。这是我的代码：

<body>
  <div id="regionTree">

  </div>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
  </script>
  <script>
    $(function(){

        var json = [{"ID":1,"Name":"r1","Child":[{"ID":1,"Name":"c1"},{"ID":2,"Name":"c2"}]},{"ID":1,"Name":"r2","Child":[{"ID":1,"Name":"c1"},{"ID":2,"Name":"c2"}]}];
        //debugger;
        var treeString = '';
        treeString+='<ul>';
        $(json).each(function(key, value) {
            treeString+='<li>';
            treeString+='<label><input type="checkbox" class="parent"/>'+value.Name+'</label><br/>';
            //alert(value.Name);
            if(value.Child != undefined && value.Child.length > 0)
            {
                treeString+='<ul>';
                $(value.Child).each(function(key,value){
                    treeString+='<li>';
                    treeString+='<label><input type="checkbox" class="child"/>'+value.Name+'</label><br/>';
                    treeString+='</li>';
                    //alert(value.Name);
                });
                treeString+='</ul>';
            }
            treeString+='</li>';
        });
        treeString+='</ul>';
        $('#regionTree').append(treeString);

        //------
        $('.parent').live('click', function(){
            debugger;
            console.log($(this).find('.child').size());
            $(this).parent().children(':checkbox').prop("checked", true);

        });
    });
  </script>
</body>

如果您复制粘贴并在FF / Chrome中打开，则可以看到复选框树。如果选择父级，我想选择节点的所有子元素。但由于某种原因，我无法获得节点的所有子复选框。

请帮忙。

Answer 1

$(this).parent().children(':checkbox').prop("checked", true);

复选框的父级是标签，而不是li。

尝试：

$(this).closest('li').find(':checkbox').prop("checked", true);

Answer 2

您可以使用任何ready插件创建一个带有复选框的树形成JSON源。例如： https://github.com/AlexLibs/niTree

jquery树选择所有子复选框

2 个答案: