In this post we can see how to show or hide certain form fields when a radio button selection happen in your web form using jquery. To do this you need a different DIV associated with that radio button to hide or show certain fields in the form. You can achive this very easily and efficiently using jquery.
Show/Hide form elements based on radio button selections using jQuery
Just put a click function to the radio button group $(“input[name$='type']“).click and then get the value var radio = $(this).val() of the radio button. Once get the value of the radio button using the ID of the DIV simply hide() or show() .
Below is the complete script used in the demo
<script>
$(document).ready(function(){
$(“input[name$='type']“).click(function(){
var radio = $(this).val();
if(radio==’Individual’) {
$(“#Individual_box”).show();
$(“#Company_box”).hide();
}
else if(radio==’Company’) {
$(“#Company_box”).show();
$(“#Individual_box”).hide();
}
});
$(“#Individual_box”).show();
$(“#Company_box”).hide();
});
</script>
$(document).ready(function(){
$(“input[name$='type']“).click(function(){
var radio = $(this).val();
if(radio==’Individual’) {
$(“#Individual_box”).show();
$(“#Company_box”).hide();
}
else if(radio==’Company’) {
$(“#Company_box”).show();
$(“#Individual_box”).hide();
}
});
$(“#Individual_box”).show();
$(“#Company_box”).hide();
});
</script>
Hope this post will help you.If you any have suggestions or comments please post in comments sections.
This doesn’t work in IE8. I get an Object Expected error.
thanks much for your example. It has really helped me.
This example is very usefull .
Thnak”s
very usefull, but doesn
Any way to make this work in IE8?
I want
red red blue
radio button… when i click red for both the time it should show the same div and if blue it should another div.. how to do that using javascript… help please?????????