1

グーグルを検索してオーバーフローを積み上げ、いくつかの良い提案を見つけましたが、何を試してもうまくいきません。基本的に、ラジオ グループが yes に設定されている場合、div を表示および非表示にしようとしています。

これを機能させるためにクラスを使用しようとしましたが、概念を誤解していると思いますが、まったく機能しません。

同様に機能するには、複数のインスタンスが必要であることに注意してください:)

要約すると、はいといいえの 2 つのラジオ ボタンが必要です。はいが選択されている場合、追加フィールドのクラスを持つ次の直接 div を表示し、ラジオ ボタンが選択されていない場合は再び非表示にする必要があります。$(this) を使用して次の .extra-field を見つけ、それのみを表示する必要があると思います

簡単に jsFiddle を作成しました - http://jsfiddle.net/andyjh07/GmYjd/以下のコードを貼り付けました:

HTML -

    <label class="label2">Do you have a 2nd Occupation?</label>
<input class="checkme" type="radio" name="22. Do you have 2nd Occupation" value="Yes" />Yes
<input type="radio" name="22. Do you have 2nd Occupation" value="No" />No<br />
<div class="extra-field">
    <label class="label">Secondary Occupation?</label> <input class="textbox requiredField" name="22a. If Yes - Secondary Occupation?" type="text" />
    <div class="clear">&nbsp;</div>
</div>

そしてjquery -

// Trigger extra fields to show depending on what checkme class is clicked
    $(".checkme").on('click', function(){
        $(this).next(".extra-field").fadeToggle(500);
    });
4

3 に答える 3

1

これまでに見つけた最良の解決策：

http://jsfiddle.net/GmYjd/8/

$(':radio').click(function(){
    $(this).parent().next(".extra-field")
        .toggle(this.value.toLowerCase() == 'yes');
});

要素内のラジオをグループ化して、対応する追加フ​​ィールドを具体的に選択できるようにする必要があります。

于 2013-03-20T11:11:04.987 に答える
0

セカンダリ入力フィールドを最初は非表示にし、[はい] をクリックすると表示されるようにしました。

<label class="label2">Do you have a 2nd Occupation?</label>
<input class="checkme" type="radio" name="22. Do you have 2nd Occupation" value="Yes" />
Yes
<input type="radio" name="22. Do you have 2nd Occupation" value="No" />
No
<br />
<div class="extra-field" style="display:none">
    <label class="label">Secondary Occupation?</label>
    <input class="textbox requiredField" name="22a. If Yes - Secondary Occupation?" type="text"  />
    <div class="clear">
        &nbsp;
    </div>
</div>

そして、JS

$('.checkme').click(function() {
   if($('.checkme').is(':checked')) { 
       $(".extra-field").css("display","block")
   }
});
于 2013-03-20T10:56:49.497 に答える
0

私はこれを理解しやすくしました（ただし、他のコードよりも多くのコードがあります）.ラジオのクリックされた値を確認しただけで、そうでyes showない場合はdivhideです..はいinput:radio、すべてのラジオを選択します..名前属性で指定できます..しかし、あなたの名前は長すぎるので (変更することをお勧めします)..

これを試して

$('input:radio').click(function(){
  if($(this).val()=='Yes'){
     $(this).siblings(".extra-field").show();  //use slideDown('slow') for effect
  }else{
     $(this).siblings(".extra-field").hide(); //use slideUp('slow') for effect
  }

});

その名前を使用したいことを確認してください.... フォームの投稿中に問題が発生する可能性があります..（そうしている場合）...

ここで働くフィドル

更新されたフィドル

于 2013-03-20T10:55:31.180 に答える