javascript - 选择父复选框-6ren

javascript - 选择父复选框

转载作者：行者123 更新时间：2023-11-28 16:18:44

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

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

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

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