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?????????
thanks. .for you example. .