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代码，其中有一个带有父节点和子节点的树。

这很有效。但是如果检查了所有子节点，则必须自动检查root / parent。

如果未选中所有子节点，则必须自动取消选中root / parent。 我如何实现这一目标？

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

检查所有子子节点后，还将检查其父节点。这是代码：

 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 2

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

$(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 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