Jun
10
2010How to show/hide divs based on radio button selection using jQuery
Tags: javascript | jQueryIf you want a radio button selection to show certain Div contents and hide some other Div on the web page, and on another radio button selection, you need a different Div associated with that radio button hiding the unwanted one, read on.
This can be achieved very efficiently using jQuery. We can put the code inside “click” or “change” event of radio button group,
$("input[name$='group_name']").click(function(){ }
and after getting the value of selected radio button by this:
var radio_value = $(this).val();
We can simply hide or show our required Divs using following:
if(radio_value=='Yes') { $("#yes_box").show("slow"); $("#no_box").hide(); }
Here’s putting every together, simply put this code in your page inside script tags and it will work.
$(document).ready(function(){ $("input[name$='group_name']").click(function(){ var radio_value = $(this).val(); if(radio_value=='Yes') { $("#yes_box").show("slow"); $("#no_box").hide(); } else if(radio_value=='No') { $("#no_box").show("slow"); $("#yes_box").hide(); } }); $("#yes_box").hide(); $("#no_box").hide(); });
Here is the demonstration of this.
You can see it here in new window as well.
Hope that helps.
Cheers.
Related posts:
- How to show/hide content based on select onchange using jQuery
- How to align checkboxes/radio buttons and their labels
- [osCommerce] Change Currency Selection based on Payment Module on checkout_confirmation page in osCommerce Store
- [AS3] Dynamically create button MovieClips and center align container MovieClip on stage in Flash
- WordPress Gravity Forms Validation on Client Side using jQuery
Alex
Thank you, I was looking for something else, but this gave me idea for what I needed.
Pato
This works thanks! I tried using js but failed miserably. I am new to JQuery and I managed to decipher this, it took some time to get my head around it so I have added a few things I needed to work out for amateurs like me…
1) Make sure you are linking to a JQuery library in your header ie.
2) ‘group_name’ is the name of the list of radio buttons ie.
3 )
‘radio_value’ is the value of the radio button ie.
4)
‘yes_box’ refers to the ‘id’ of your ,, or anything that you can give an ‘id’ to ie.
Anything within this table will hide
Pato
damn the comments hide code!
Ali Qureshi
I’ve placed the code in code tag, it appears now. Thanks for posting!
mick
where is a demo ?
Ali Qureshi
Check it here
aviator
thank you so much.
nabil
Where’s the div code? how to display each div? Please need help, i dont really get the idea.
TY
Ali Qureshi
The demonstration is above. and here’s the html an css code:
<form action="" method="post" name="form1"> <p> <label> <input type="radio" name="group_name" value="Yes" id="group_name_0" /> Yes</label> <label> <input type="radio" name="group_name" value="No" id="group_name_1" /> No</label> <br /> </p> </form> <div id="yes_box"> This is you Yes box content. Now select the 'No' radio button and this box will disappear slowly and No content box will appear! </div> <div id="no_box"> This is you No box content. Now select the 'Yes' radio button and this box will disappear slowly and Yes content box will appear! </div>