CheckAll CheckBox Jquery

Question

我使用此代码检查树视图中的复选框。

HTML：

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

JavaScript：

$(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");
            }
        });
    });
});​

JSFiddle: http://jsfiddle.net/jRAcq/

这很好用。但是，如果未选中任何一个子节点，则取消选中根/子根。我该怎么做？

Answer 1

试试这个...

$(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");
            $(this).parents('ul').each(function(){
                $(this).prev('input:checkbox').removeAttr("checked");
             });
        }
    });
});

});

Answer 2

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

现场演示见此链接：http://jsfiddle.net/nanoquantumtech/JfMCP/

//或者

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

            jQuery.fn.reverse = [].reverse;

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

                $('#tree').find("input:checkbox + ul").reverse().each(function () {
                    $(this).prev('input:checkbox').prop('checked', $(this).find('input:unchecked').length === 0 ? true : false);
                });
            });
        });

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

根据您的 html jquery 代码如下：

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

            jQuery.fn.reverse = [].reverse;

            $('#PagesTree').find('input:checkbox').live('change', function () {
                $('#' + $(this).attr('name').replace(/CheckBox/g, '') + 'Nodes').find('input:checkbox').prop('checked', $(this).prop("checked"));

                $('#PagesTree').find('input:checkbox').reverse().each(function () {
                    var obj = $('#' + $(this).attr('name').replace(/CheckBox/g, '') + 'Nodes');
                    if (obj.find('input:checkbox').length > 0)
                        $(this).prop('checked', obj.find('input:unchecked').length === 0 ? true : false);
                });
            });
        });

现场演示见此链接：http://jsfiddle.net/nanoquantumtech/GmT7U/