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/

友情链接