JQuery: Show Hide div on radio button using Jquery

Introduction

Today, Explaining about how to show hide HTML Div on radio button click containing input box on radio button click. This particular requirement arise whenever we are asking questions or confirming something on that basis we have to show and hide html controls under div, I have explained here in with great deal.

Placing HTML Controls

Do you have Pin No?

   Yes


   No



Pin No:
  

Jquery Script Code

Here firing Jquery click event to show hide div (div contains input box) on radio button click.

$(function() {
   $("input[name='chkPinNo']").click(function() {
     if ($("#chkYes").is(":checked")) {
       $("#dvPinNo").show();
     } else {
       $("#dvPinNo").hide();
     }
   });
 });

CSS Code Snipper

Here writting CSS code to make our style elegant on HTML hr tag.

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

Showing working Example (Show Hide div on radio button using Jquery)

Conclusion

Show Hide div on radio button using Jquery on button click demonstrated above with all aspects. Hope, this article will help to all who are keen to learn about advance Jquery.

Relevant Reading

• Email Validation using Jquery
• Upload Image using jquery MVC
• Jquery Timer Countdown in MVC Application
• Capitalize the First Letter of String Using Jquery