使用 JQUERY 检查树中的所有子复选框答案

【问题标题】：Check all child checkboxes in tree with JQUERY使用 JQUERY 检查树中的所有子复选框
【发布时间】：2012-12-17 06:25:11
【问题描述】：

我希望能够检查父复选框并同时检查子复选框。我可以获得底部父复选框来实现这一点，但底部父复选框上方的父复选框都不起作用。奇怪的是，检查孩子会迫使父母正确检查。此代码旨在用于从数据库中提取数据的树视图中。

<script language="Javascript">
$.fn.linkNestedCheckboxes = function () {
    var childCheckboxes = $(this).find('input[type=checkbox] ~ ul li input[type=checkbox]');

    childCheckboxes.change(function(){
        var parent = $(this).closest("ul").prevAll("input[type=checkbox]").first();
        var anyChildrenChecked = $(this).closest("ul").find("li input[type=checkbox]").is(":checked");
        $(parent).prop("checked", anyChildrenChecked);
    });

    // Parents
    childCheckboxes.closest("ul").prevAll("input[type=checkbox]").first().change(function(){
       $(this).nextAll("ul").first().find("li input[type=checkbox]")
                .prop("checked", $(this).prop("checked"));        
    });

    return $(this);
};

$(window).load(function () {
    $("form").linkNestedCheckboxes();
});
</script>

<html>
<form>


<ul id="N0_1" class="tree" style="display: block;">
            <li id="F0_10" class="folderOpen">
            <input type="checkbox" value="31" name="folderID">
            <a class="treeview" href="javascript:toggle('N0_1_0','F0_10')">Test AI File</a>
                <ul id="N0_1_0" class="tree" style="display: block;">
                    <li id="D0_1_00" class="file" style="list-style-image: url(../manage/images/document.gif);">
                    <input type="checkbox" value="31|859" name="documentID">
                    AAA5083
                    </li>
                    <li id="D0_1_01" class="file" style="list-style-image: url(../manage/images/document.gif);">
                    <input type="checkbox" value="31|1024" name="documentID">
                    Test Indd File
                    </li>
                </ul>
            </li>
            <li id="F0_10" class="folderOpen">
            <input type="checkbox" value="31" name="folderID">
            <a class="treeview" href="javascript:toggle('N0_1_0','F0_10')">Test AI File</a>
                <ul id="N0_1_0" class="tree" style="display: block;">
                    <li id="D0_1_00" class="file" style="list-style-image: url(../manage/images/document.gif);">
                    <input type="checkbox" value="31|859" name="documentID">
                    AAA5083
                    </li>
                    <li id="D0_1_01" class="file" style="list-style-image: url(../manage/images/document.gif);">
                    <input type="checkbox" value="31|1024" name="documentID">
                    Test Indd File
                    </li>
                </ul>
            </li>
        </ul>
</form>
</html>

【问题讨论】：

标签： jquery html treeview

【解决方案1】：

$('#tree input:checkbox').on('change', function () {
    $(this).next('ul').find('input:checkbox').prop('checked', $(this).prop('checked'));
    for (var i = $('#tree').find('ul').length - 1; i >= 0; i--) {
        $('#tree').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
            return $(this).next('ul').find('input:not(:checked)').length === 0 ? true : false;
        });
    }
})

使用“on”而不是过时的“live” 使用 'input:not(:checked)' 代替添加扩展器。

【讨论】：

【解决方案2】：

I had answered another one question like this same.

CheckAll CheckBox Jquery.

//=============================================== ========================//

   $(document).ready(function () {
                $.extend($.expr[':'], {
                    unchecked: function (obj) {
                        return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
                    }
                });

                $("#tree input:checkbox").live('change', function () {
                    $(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));

                    for (var i = $('#tree').find('ul').length - 1; i >= 0; i--) {
                        $('#tree').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
                            return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
                        });
                    }
                });
            });

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

//=============================================== ========================//

Demo.

【讨论】：

你需要完全相同还是不同？
谢谢！这引导我朝着正确的方向前进。我现在可以正常工作了。