Categories
Jquery

Show/Hide form elements based on radio button selections using jQuery

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.

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>

Leave a Reply

Your email address will not be published. Required fields are marked *