If 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.
Thank you so much it works for me in MVC5.
There’s a problem with this that I don’t know how to fix.
If you refresh the page after selecting an option, the option selected is still highlighted but the content it is supposed to show is not displayed.
A refresh needs to set both radio buttons back to 0 selections…
Of course, if you refresh the page, it will reset to default. Both boxes are set to hide in the code.
Hey Buddy!
Thanks a lot for the post. Just what I was looking for.
This doesn’t seem to work on the latest IE. Any suggestions to get it to work in IE?
I tested it in IE9 and it worked for me.
Is there a way to make the ‘no_box’ state the default state when the page loads?
I’m sorry if this is a repeat post.
never mind, i found it.:
$(document).ready(function(){
$(“#no_box”).show(“fast”);
$(“#yes_box”).hide(“fast”);
$(“input[name$=’Guest’]”).click(function(){
Is it possible to display the ‘no_box’ state by default when the page loads?
On the last line in the js coide, $(“#no_box”).hide(); to $(“#no_box”).show();
Thanks man.. I was looking for this.
Where’s the div code? how to display each div? Please need help, i dont really get the idea.
TY
The demonstration is above. and here’s the html an css code:
thank you so much.
where is a demo ?
Check it here
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
damn the comments hide code!
I’ve placed the code in code tag, it appears now. Thanks for posting!
Thank you, I was looking for something else, but this gave me idea for what I needed.