[SOLVED] jQuery - Using the radio button to show/hide a div.

[suttercain]

Hi everyone,

 

I want to be able to show a div cotnainer based on the radio button selected. Example 3 options Yes, No, Don't Know. If yes is clicked a DIV is hown (I have this part working), but if Yes is clicked and the user changes it to No or Don't Know, I want to hide that DIV. This is the part I don't have working, the hide.

 

Here is the code I am using that work with show, but not hide.

 

  $("#14a").click(function(){

	// If checked
	if ($("#14a").is(":radio"))
	{
		//show the hidden div
		$("#extra").show("fast");
	}
	else
	{	   
		//otherwise, hide it 
		$("#extra").hide("fast");
	}
  });

<input id="14a" type="radio" name="14" value="Yes" class="style1" /> Yes<br />
<input id="14b" type="radio" name="14" value="No" class="style1" /> No<br />
<input id="14c" type="radio" name="14" value="Don't Know" class="style1" /> Don't Know
<div id="extra">
<br /><label>If yes, please specify.</label>	
<input id="email" type="text" class="style" />
</div>

 

Any help would be much appreciated. Thank you.

[Axeia]

Well the reason is that you only listen to 'onclick' event of the radiobutton with the id '14a'.

So clicking on another radio button wont fire your event.

 

Try changing

  $("#14a").click(function()

to

  $("#14a").change(function()

(Guessing the name would simply be change in jquery)

If that doesn't work make the function external and add a click event listener to 14b/14c as well, calling the new external function

[suttercain]

Hi Axeia,

 

I gave it a go and sadly it didn't work. The "show" still worked fine but when selecting a different radio button the DIV did not hide.

 

Anyone else know of a possible solution?

 

Thanks.

[Axeia]

Then use the alternative solution I posted. Did post two as I feared changes made my javascript wouldn't be detected.

  $("#14a").click(function(){ checkRb() });
  $("#14b").click(function(){ checkRb() });
  $("#14c").click(function(){ checkRb() });
function checkRb()
{      
      if ($("#14a").is(":radio"))
      {
         //show the hidden div
         $("#extra").show("fast");
      }
      else
      {      
         //otherwise, hide it
         $("#extra").hide("fast");
      }
}

 

 

[Ken2k7]

Give each input element some static class name like this -

<input id="14a" type="radio" name="14" value="Yes" class="static_class style1" /> Yes<br />
<input id="14b" type="radio" name="14" value="No" class="static_class style1" /> No<br />
<input id="14c" type="radio" name="14" value="Don't Know" class="static_class style1" /> Don't Know
<div id="extra">
<br /><label>If yes, please specify.</label>   
<input id="email" type="text" class="style" />
</div>

<script type="text/javascript">
$(".static_class").click(function(){if($(this).val()==="Yes") $("#div").show("fast"); else $("#div").hide("fast");});
</script>

[suttercain]

Works perfectly Ken, thank you so much!!!