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;
        });
    }
})

時代遅れの「ライブ」ではなく「オン」を使用する エクステンダーを追加する代わりに「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 に答える