0

レベル数に制限のないツリー構造のページがあります。各レベルにはチェックボックスがあり、ユーザーが関心のあるレベルにチェックマークを付けることができるようにする必要があります。ユーザーがレベルをクリックした場合、その子のすべての親レベルを選択する必要があります。また、親のチェックボックスがオフになっている場合は、すべての子レベルのチェックが外されている必要があります。

以下のコードを書いてみましたが、子をクリックすると親と祖父母にチェックマークが付きますが、子は選択されていません。また、ボックスを選択するたびにアイテムが再度選択されるため、アイテムの選択を解除することもできません。

私はコードに変更を加えてアイデアを出し続けていますが、私は間違った方向に進んでいると思います。私が達成しようとしていることに対して利用できるより良い解決策があるかどうか知りたいと思いました。コードは次のとおりです。

<!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して、チェックボックスのデフォルトのアクションを停止しました。私はこれでどんな方向にも最も感謝するでしょう。

編集：

順序付けされていないリスト内のオプションは次のとおりです。上記の私の例は、下のオプションをクリックして、複数のツリーがあることを考慮せずに親オプションをクリックしてテストしようとしていたため、3つのオプションしかないため誤解を招きました。 

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

3 に答える 3

4

この機能をすでに提供しているプラ​​グインがあります。

それはあなたが探しているものを正確に行うので、これを試してください。

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

デモ：

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

于 2012-05-09T22:45:18.090 に答える
0

「レベル」の意味がわからない、チェックボックスが他の要素内にネストされているのか、それとも例のように兄弟だけなのか。

サンプルHTMLが正しい場合は、すべてのインラインJSを削除し、次のようにします。

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

フィドル

于 2012-05-09T23:02:36.930 に答える
0

このコードを試してください：

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

于 2012-05-09T23:17:49.570 に答える