-1

ラジオ ボタン グループ (同じ名前のラジオ) で 1 つしか選択できないことは誰もが知っていますが、私のアプリでは、選択したラジオ ボタンに基づいて、ブロック内のコンテンツを表示/非表示にする必要があります (ブロック内にネストされた要素がある場合があります)。

質問: jQuery を使用して、ラジオ ボタンが選択されたときにブロック内のコンテンツを表示し、別のラジオ ボタンが選択されたときにそのコンテンツを非表示にするアルゴリズムを作成するにはどうすればよいですか?

アルゴリズム: radio1、radio2、…、および同じ名前の radioN のいずれかが選択された場合、Flip(classname,id) は渡されたクラス名ですべての要素を表示および値をリセットし、渡された id を除く他のすべての要素を非表示にする必要があります。

<script type="text/javascript">
  function Flip(classname,id) {
    //this javascript function will make 
    //    1) id of the given classname visible, 
    //    2) and reset & invisible all the rest (all div elements of the given classname except id invisible

}

</script>
</head>
<body>
Requestor:<input type="radio" name="Req" onclick="Flip('RadioClass','radioDIV1');" /><br />
<div class="RadioClass" id="radioDIV1" style="display:none;" >
    Requestor 1234:
    <div >
        decendant level1a:
    </div>
</div>
Submitter:<input type="radio" name="Req" onclick="Flip('RadioClass','radioDIV2');" /><br />
<div class="RadioClass" id="radioDIV2" style="display:none;">
    Submitter 567:
    <div >
        decendant level1b:
    </div>
</div>
ForInfo:<input type="radio" name="Req" onclick="Flip('RadioClass','radioDIV3');" /><br />
<div class="RadioClass" id="radioDIV3" style="display:none;" >
    ForInfo 89:
</div>
</body>
4

1 に答える 1

1

これは、ラジオボタンが選択されたときにパネルを表示および非表示にするフィドルです。

3つではなく2つのラジオボタンのみを実装しました;-)

HTML ...

<body>
    <div>Requestor:<input type="radio" name="Req"/>
        <div class="RadioClass" id="radioDIV1" style="display:none;">
            Requestor 1234:
            <div >
                decendant level1a:
            </div>
        </div>
    </div>

    <div>Submitter:<input type="radio" name="Req"/>
        <div class="RadioClass" id="radioDIV2" style="display:none;">
            Submitter 567:
            <div >
                decendant level1b:
            </div>
        </div>
    </div>
</body>​

そして、jQueryを使用したJavaScriptコード...

$("input").change(function() {
    $(".RadioClass").hide();
    $(this).next("div").toggle()
});​
于 2012-07-11T19:30:07.213 に答える