3

セットアップには次のものがあります。

<form action="?" method="post" name="contactform">

<div class="question">
    <p><span><input type="radio" name="answer" value="Yes" onclick="showHide('one')"/></span> Yes</p>
</div>
<div id="one" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="No" onclick="showHide('two')"/></span> No</p>
</div>
<div id="two" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
    <p><input type="radio" name="answerdetail" value="Reason Four" /> Reason Four</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="Not sure" /></span> Not sure</p>
</div>

フォームを最初に表示したとき、表示されているチェック ボックスは 3 つだけです (はい、いいえ、わかりません)。「はい」をクリックすると「はい」のサブチェックボックスが表示され、「いいえ」をクリックすると「いいえ」のサブチェックボックスが表示されます。

一度に 1 セットのサブ チェックボックスのみを表示することが可能かどうかを知りたいですか?

つまり、誰かが「はい」をチェックすると、「はい」のサブチェックボックスが表示されます。次に気が変わって [いいえ] をクリックすると、[はい] のサブ チェックボックスが消え、[いいえ] のサブ チェックボックスが表示されます (つまり、一度に表示されるサブ チェックボックスは 1 セットだけです)。

これが理にかなっていることを願っています。

どんな助けでも大歓迎です！

4

3 に答える 3

4

jQueryには、これに役立ついくつかの組み込みメソッドがあります。.hide()/を使用.show()して、要素の可視性を切り替えることができます。を使用して、正解セクションをターゲットにすることができます.next()。さらに、「変更」イベントを処理するため.change()に、ユーザーが別のオプションを選択するたびにハンドラーを起動する を使用できます。

$(document).ready(function() {
    $('input[name="answer"]').change(function() {
        $(".answers").hide();
        $('input[name="answer"]:checked')
            .closest(".question")
            .next(".answers")
            .show();
    });
});
于 2012-10-08T10:23:35.243 に答える
0

あなたのHTMLを考えると、私が考えることができる最も簡単な方法：

$('input:radio').change(
    function(){
        $('.answers').slideUp();
        $(this).closest('div').next('.answers').slideDown();
    });​

JS フィドルのデモ。

参考文献:

于 2012-10-08T10:52:11.733 に答える
0

これが私がこれにアプローチする方法です：

デモテスト: http://jsfiddle.net/earthdesigner/UYWx8/

于 2012-10-08T10:48:32.843 に答える