Frank Frank - 5 months ago 14
HTML Question

How to Show and hide table with radio buttons?

Do you have any idea to rewrite the jQuery code to choose between to two selection options (Yes and No)? .

I tried this in 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;
}


The "Yes" button
send_to_one
works well, if I select it, the correct informations are shown and the informations from
send_to_two
are hidden. If I select the "No" button the informations from
send_to_two
are shown, but the
send_to_one
informations are still shown. I tried to use the command from the first if statement, but this doesn't work. Do you have any ideas?

Thanks for your help, but always i add the recommended command the
send_to_two
action doesn't work.

This is my _form. Did i maybe make a mistake there?


<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>



Thanks for your Help!

Answer

You're just missing the hide statement in the second condition, your code should be :

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();
}

Because you're using jquery better if you use jquery object $(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();
            }
        }
    });
});

Hope this helps.

$(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>