ラジオボタンで表を表示および非表示にするにはどうすればいいですか？

Question

jQueryコードを書き換えて2つの選択オプション（YesとNo）のどちらかを選択する考えはありますか？ 。

私はjQueryのでこれを試してみました：

$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("input:radio[name='decision']").change(function(){ 

    if(this.checked){ 
     if(this.value =='one'){ 
      $("#send_to_one").show() && $("#send_to_two").hide() 
     }else if(this.value =='two'){ 
      $("#send_to_two").show() 
     }else{ 
      $("#send_to_one").hide(); 
     } 
    } 
    }); 
}); 

CSS：

#send_to_one{ 
    display:none; 
} 

#send_to_two{ 
    display:none; 
} 

私はそれを選択した場合、正しい情報が表示され、うまく機能send_to_one "はい" ボタンをクリックし、 send_to_twoの情報は表示されません。 「いいえ」ボタンを選択すると、send_to_twoの情報が表示されますが、send_to_oneの情報は引き続き表示されます。最初のifステートメントからコマンドを使用しようとしましたが、これは機能しません。あなたはなにか考えはありますか？

ご協力ありがとうございますが、常に私は推奨コマンドを追加します。send_to_twoアクションは動作しません。

これは私の_formです。多分私はそこで間違いを犯したでしょうか？あなたの助けを

<h2>Are you insured?</h2> <div id="send_to"> <input type="radio" id="send_poll" name="decision" value="one" checked="checked" />Yes<br/> <input type="radio" id="send_poll" name="decision" value="two" />No<br/> <div id="send_to_one"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"><%= ........ %></div><div class="table"></div><div class="table"></div> </div> </div> </div> <div id="send_to_two"> <div class="table-row-2"> <div align="center"> <div class="field"> <div class="table"> <div class="table"><%= ..... %></div><div class="table"></div><div class="table"></div></div> </div> </div> </div> </div> </div>

ありがとう！あなただけの第二の条件で非表示文を逃している

Answer 1

、あなたのコードは次のようになります。

if(this.value =='one') 
{ 
    $("#send_to_one").show(); 
    $("#send_to_two").hide(); 
}else if(this.value =='two'){ 
    $("#send_to_two").show(); 
    $("#send_to_one").hide(); //<<---------- Adding this line to hide 'send_to_one' 
}else{ 
    $("#send_to_one").hide(); 
} 

方が良いjqueryのを使用しているので、あなたがjQueryオブジェクト$(thhis)使用する場合：

$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("input:radio[name='decision']").change(function() 
    { 
     if($(this).is(':checked') ) 
     { 
      if($(this).val()==='one') 
      { 
       $("#send_to_one").show(); 
       $("#send_to_two").hide(); 
      } 
      else if($(this).val()==='two') 
      { 
       $("#send_to_two").show(); 
       $("#send_to_one").hide(); 
      } 
      else 
      { 
       $("#send_to_one").hide(); 
      } 
     } 
    }); 
}); 

をお役に立てれば。

$(document).ready(function() { 
 
    $("#send_to_one").hide(); 
 

 
    $("input:radio[name='decision']").change(function(){ 
 
    if($(this).is(':checked')) 
 
    { 
 
     if($(this).val()==='one') 
 
     { 
 
     $("#send_to_one").show(); 
 
     $("#send_to_two").hide(); 
 
     } 
 
     else if($(this).val()==='two') 
 
     { 
 
     $("#send_to_two").show(); 
 
     $("#send_to_one").hide(); 
 
     } 
 
     else 
 
     { 
 
     $("#send_to_one").hide(); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="radio" name='decision' value='one'/>Yes 
 
<input type="radio" name='decision' value='two' checked/>No 
 
<br/> 
 
<div id="send_to_one"> 
 
    send_to_one div 
 
</div> 
 

 
<div id="send_to_two"> 
 
    send_to_two div 
 
</div>

Answer 2

if(this.checked){ 
     if(this.value =='one'){ 
      $("#send_to_one").show() && $("#send_to_two").hide() 
     }else if(this.value =='two'){ 
      $("#send_to_two").show(); 
      $("#send_to_one").hide() 
     }else{ 
      $("#send_to_one").hide(); 
     } 
    } 

Answer 3

これはあなたを助けるでしょう、これを試してみて、希望;

$(document).ready(function() { 
     $("#send_to_one").hide(); 
     $("input:radio[name='decision']").change(function(){ 

     if(this.checked){ 
      if(this.value =='one'){ 
       $("#send_to_one").show(); 
       $("#send_to_two").hide(); 
      }else if(this.value =='two'){ 
       $("#send_to_two").show(); 
       $("#send_to_one").hide(); 
      } 
     } 
     }); 
    }); 

Answer 4

を逃すためにあなたのコードをチェック：

$(document).ready(function() { 
    $("#send_to_one").hide(); 
    $("#send_to_two").hide(); 
    $("input:radio[name='decision']").click(function(){ 
     if($(this).val() =='one'){ 
       $("#send_to_one").show(); 
       $("#send_to_two").hide(); 
     }else if($(this).val() =='two'){ 
       $("#send_to_one").hide(); 
       $("#send_to_two").show(); 
     }else{ 
       $("#send_to_one").hide(); 
       $("#send_to_two").hide(); 
     } 
    }); 
});