选择父复选框

Selecting Parent Checkboxes

本文关键字：复选框 选择      更新时间：2023-09-26

我有一个页面，它的树结构对它的级别数没有限制。每个级别都有一个复选框，我需要能够允许用户勾选他们感兴趣的级别。如果用户单击某个级别，则需要选择该子级别的所有父级别。此外，如果未选中父复选框，则应取消选中所有子级别。

我尝试编写下面的代码，但是如果我单击孩子，它会勾选父母和祖父母，但未选择孩子。我也无法取消选择项目，因为每次我选择一个框时，它总是会再次选择它。

我一直试图对代码进行更改并有想法，但我认为我走错了方向，想知道是否有更好的解决方案可用于我想要实现的目标。这是代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Check Box</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script language="javascript">
            $(document).ready(function () {
                $(".test").click(function (event) {
                    event.preventDefault();
                });
            });
            function set_checked(id, checked) {
                $("#ID_" + id).attr("checked", checked)
                alert(id);
            }
            function CheckMe(id) {
                var IDS = id.replace("ID_", "");
                var IDS = IDS.split('_');
                for (i = 0; i < IDS.length; i++) {
                    set_checked(IDS[i], true);
                }
            }
        </script>
    </head>
    <body>
        <div>
            <form>
                <p>
                    <input name="ID" type="checkbox" id="ID_123" value="123" onClick="CheckMe('ID_123')" class="test">Grandparent
                    <br>
                    <input name="ID" type="checkbox" id="ID_124" value="124" onClick="CheckMe('ID_123_124')"class="test">Parent
                    <br>
                    <input name="ID" type="checkbox" id="ID_125" value="125" onClick="CheckMe('ID_123_124_125')"class="test">Child
                </p>
                <p>
                    <input type="submit" name="button" id="button" value="Submit">
                </p>
            </form>
        </div>
    </body>
</html>

我使用 jQuery PreventDefault 来停止复选框的默认操作。我将非常感谢这方面的任何方向。

编辑：

以下是无序列表中的选项。我上面的例子具有误导性，因为它只有三个选项，因为我试图测试单击底部选项并单击父选项而不考虑会有多个树。 

<form action="" method="get" id="test">
<ul>
<li>
<input type="checkbox" name="ID" value="1">
<label>Level 1</label>
<ul>
<li><input type="checkbox" name="ID" value="2"><label>Level 1.1</label>
<ul>
<li><input type="checkbox" name="ID" value="3"><label>Level 1.1.1</label>
</ul>
</ul>
<ul>
<li><input type="checkbox" name="ID" value="4"><label>Level 1.2</label>
<ul>
<li><input type="checkbox" name="ID" value="5"><label>Level 1.2.1</label>
<li><input type="checkbox" name="ID" value="6"><label>Level 1.2.2</label>
<li><input type="checkbox" name="ID" value="7"><label>Level 1.2.3</label>
<ul>
<li><input type="checkbox" name="ID" value="8"><label>Level 1.2.3.1</label>
<li><input type="checkbox" name="ID" value="9"><label>Level 1.2.3.2</label>
</ul>
<li><input type="checkbox" name="ID" value="10"><label>Level 1.2.4</label>
<li><input type="checkbox" name="ID" value="11"><label>Level 1.2.5</label>
<li><input type="checkbox" name="ID" value="12"><label>Level 1.2.6</label>
</ul>
</ul>
<li><input type="checkbox" name="ID" value="13"><label>Level 2</label>
<ul>
<li><input type="checkbox" name="ID" value="14"><label>Level 2.1</label>
<ul>
<li><input type="checkbox" name="ID" value="15"><label>Level 2.1.1</label>
</ul>
<li><input type="checkbox" name="ID" value="16"><label>Level 2.2</label>
<ul>
<li><input type="checkbox" name="ID" value="16"><label>Level 2.2.1</label>
<li><input type="checkbox" name="ID" value="17"><label>Level 2.2.2</label>
<li><input type="checkbox" name="ID" value="18"><label>Level 2.2.3</label>
<ul>
<li><input type="checkbox" name="ID" value="19"><label>Level 2.2.3.1</label>
<li><input type="checkbox" name="ID" value="20"><label>Level 2.2.3.2</label>
</ul>
<li><input type="checkbox" name="ID" value="21"><label>Level 2.2.4</label>
<li><input type="checkbox" name="ID" value="22"><label>Level 2.2.5</label>
<li><input type="checkbox" name="ID" value="23"><label>Level 2.2.6</label>
</ul>
</ul>
</ul>
<input name="Submit" type="submit" id="Button" value="Submit">
</form>

有些插件已经提供了此功能。

试试这个，因为它正是您正在寻找的。

http://code.google.com/p/checkboxtree/

演示：

http://checkboxtree.googlecode.com/svn/tags/checkboxtree-0.5.2/index.html

试试这段代码：

<!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Check Box</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
        <script language="javascript">
            $(document).ready(function () {
                $(".test").on('click',function () {
                    var clicked = $(this);
                    var hermanos = clicked.siblings(".test");
                    if(clicked.attr("checked")=="checked")
                        $.each(hermanos, function(index,object){
                            if($(object).val() < clicked.val())
                                    $(object).attr("checked", "checked");
                    });
                else
                    $.each(hermanos, function(index,object){
                        if($(object).val() > clicked.val())
                                $(object).removeAttr("checked");
                    });
            });
        });
    </script>
</head>
<body>
    <div>
        <form>
            <p>
                <input name="ID" type="checkbox" value="123"  class="test">Grandparent
                <br>
                <input name="ID" type="checkbox"  value="124" class="test">Parent
                <br>
                <input name="ID" type="checkbox"  value="125" class="test">Child
            </p>
            <p>
                <input type="submit" name="button" id="button" value="Submit">
            </p>
        </form>
    </div>
</body>

不确定"级别"是什么意思，复选框是嵌套在其他元素中，还是像您的示例中一样，只是兄弟姐妹？

如果示例 HTML 是正确的，请删除所有内联 JS，然后执行以下操作：

$(".test").on('change', function() {
    var i = $(this).index(),
        c = $(this).is(':checked');
    $(".test").filter(function() { return $(this).index() < i; }).prop('checked', c);
});

小提琴

相关文章：