CheckAll CheckBox jQuery [英] CheckAll CheckBox Jquery

问题描述

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

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/

这很好.但是，如果未选中子节点中的任何一个，则要取消选中的根/子根.我该怎么办?

解决方案

尝试一下...

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

});

I using this code to check the checkbox in a treeview.

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/

this works well. But if the any one of the sub node is unchecked then the root/child root to be unchecked. How can I do this one?

解决方案

Try this...

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

});

这篇关于CheckAll CheckBox jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！