2

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

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

2 回答 2

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)' 代替添加扩展器。

于 2015-10-24T03:52:31.420 回答
0 
I had answered another one question like this same.

CheckAll 复选框 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>

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

演示。

于 2013-01-03T15:13:52.110 回答