Question

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

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

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

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

Answer 1

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

试试这个，因为它完全符合您的要求。

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

演示：

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

Answer 2

不确定你对“关卡”的意思是，复选框嵌套在其他元素中，还是像你的例子一样，只是兄弟姐妹？

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

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

FIDDLE

Answer 3

试试这段代码：

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

选择父复选框

3 个答案: