0

ここには他にも同様の質問がある投稿がたくさんあることは知っていますが、1 つのページで表示を切り替えるために使用される複数のラジオ ボタンに関連する投稿を見つけることができます。

フォームに 20 個の質問のセットがあり、ユーザーが [はい] を選択したときに、その特定の質問に対してテキスト領域を表示して、説明を入力できるようにしたいと考えています。

以前、「はい」ラジオ ボタンを選択すると、ページ上のすべてのテキスト領域の表示が切り替わるという問題に遭遇しましたが、 でそれを回避しようとしましたparent().find('.toggle')が、まだ機能していないようです。

あなたが提供できるどんな助けも素晴らしいでしょう！

Javascript:

$('.toggle').hide();

$('.show').bind('change',function(){

    var showOrHide = ($(this).val() == 1) ? true : false;

    showOrHide.parent().find('.toggle').toggle(showOrHide);

})

HTML:

<div class="question">
    <label>Question 1</label>
    <span class="options"> 
        No <input type="radio" class="show" value="0" id="question_1_no" name="question_1">
        Yes <input type="radio" class="show" value="1" id="question_1_yes" name="question_1">
        <br />
        <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea>
    </span> 
</div>

<div class="question">
    <label>Question 2</label>
    <span class="options"> 
        No <input type="radio" class="show" value="0" id="question_2_no" name="question_2">
        Yes <input type="radio" class="show" value="1" id="question_2_yes" name="question_2">
        <br />
        <textarea class="toggle" name="question_1_details" id="question_1_details"></textarea>
    </span> 
</div>
4

1 に答える 1

2

次の行で、変数にtrueまたはを代入します。falseshowOrHide

var showOrHide = ($(this).val() == 1) ? true : false;

次に、そのブール値リテラルで jQuery メソッドを呼び出そうとしますが、明らかに機能しません。this代わりにもう一度使用してください。siblingsレベルを上げる代わりに使用することもできます。

$(this).siblings('.toggle').toggle(showOrHide);

これが実際の例です。

別の注意として、 and は and に強制されるため、コードを少し単純化できます。その0ため1、条件ステートメントは必要ありません。falsetrue

$('.show').bind('change',function() {
    $(this).siblings('.toggle').toggle($(this).val());
});

また、最新バージョンの jQuery (1.7) を使用している場合は、on代わりにbind.

于 2011-11-19T21:40:15.173 に答える