CheckAll CheckBox Jquery div

Question

<div id="tree">
        <ul>
            <li>
                <input type="checkbox"/> Root
                <ul>
                    <li>
                        <input type="checkbox"/> Child 1
                        <ul>
                            <li><input type="checkbox"/> Subchild 1</li>
                            <li><input type="checkbox"/> Subchild 2</li>
                            <li><input type="checkbox"/> Subchild 3</li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox"/> Child 2
                        <ul>
                            <li><input type="checkbox"/> Subchild 1</li>
                            <li><input type="checkbox"/> Subchild 2</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>​

上面是html代码，其中有一棵树，有父节点和子节点。

这很好用。但是如果所有子节点都被检查，那么根/父节点必须被自动检查。

如果所有子节点都未选中，则必须自动取消选中根/父节点。 我如何做到这一点？

jQuery

   $(document).ready(function() {    
       $("#tree input:checkbox").change(function() {
       var val = $(this).attr("checked");
       $(this).parent().find("input:checkbox").each(function() {
          if (val) {
             $(this).attr("checked", "checked");
          } 
         else {
            $(this).removeAttr("checked");
         }
     });    
  }); 

});​

Answer 1

这似乎工作正常（对于选中/未选中状态）：

$(function(){
    $("#tree input:checkbox").change(function () {
        var $this = $(this), val = this.checked, $parent = $(this.parentNode.parentNode.parentNode);

        $this.parent().find("input:checkbox").each(function () {
            this.checked = val;
        });

        checkChildren($parent);
    });

    function checkChildren($node) {
        var allChecked = null;

        $node.find("ul input:checkbox").each(function(){
            if (null === allChecked) allChecked = this.checked;

            if (allChecked !== this.checked) {
                allChecked = null;
                return false;
            }
        });

        if (allChecked !== null) {
            $node.find(">input:checkbox").prop("checked", allChecked);

            var $parent = $node.parent().parent();

            if ($parent.length) checkChildren($parent);
        }
    }
});

Answer 2

当所有子子节点都被检查时，它的父节点也会被检查。这是代码：

 var io = $(this).parent().parent();
    var lidtOfIO = io.find('input[type="checkbox"]');
         var listOfCheckedCBox = $(this).parent().parent().find('input[type="checkbox"]:checked').length;
         if (listOfCheckedCBox == lidtOfIO.length)
            $(io).parent().find('input[type="checkbox"]').prop('checked', true);

JSFiddle

Answer 3

这样使用：

$('#tree input:checkbox').each(function(){
 if($(this).is(':checked')){
  $('#tree input.first').prop('checked',true);
}
});

我在代码中添加了 input.first，就好像您应该为要检查是否全部选中的输入添加一个类。

Answer 4

请在jquery代码下方

$(document).ready(function () {
    $("input[type='checkbox']").change(function () {                
        var val = $(this).is(":checked");
        $(this).parent().find("input[type='checkbox']").each(function () {            
                $(this).prop("checked", val);            
        });
    });
});

还有jsfiddle url