Last Updated on September 19, 2022 by Roshan Parihar
Use jQuery show() and hide() to Show Hide div on radio button selected. To do this, you need to add some style, script, and a few HTML. Hide each div which you want to display on select of the radio buttons.
The dynamic changes happen based on the click of the selected radio button selection. A hidden div display and the display:block property added to the displayed div element.
How to Show Hide Div On Radio Button Click or Selected in jQuery
Below is the example to show/hide div on the select of the radio button. You have to add the script, HTML, and, also some style CSS to hide the div at the start.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> .myDiv{ display:none; padding:10px; } #showOne{ border:1px solid red; } #showTwo{ border:1px solid green; } #showThree{ border:1px solid blue; } </style> |
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function(){ $('input[type="radio"]').click(function(){ var demovalue = $(this).val(); $("div.myDiv").hide(); $("#show"+demovalue).show(); }); }); </script> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<input type="radio" name="demo" value="One"/> One <input type="radio" name="demo" value="Two"/> Two <input type="radio" name="demo" value="Three"/> Three <div id="showOne" class="myDiv"> <strong>"One"</strong> selected. </div> <div id="showTwo" class="myDiv"> <strong>"Two"</strong> selected. </div> <div id="showThree" class="myDiv"> <strong>"Three"</strong> selected. </div> |
Output
One
Two
Three
There are three radio buttons given above. On the selection of each radio button, a div will display. The dynamic change can handle by using the simple jQuery script as given above.
In addition to all these, don’t forget to add the display:none property to all the divs to hide them at the start and display them only on select of the radio buttons.
You may also like to read.
- jQuery show/hide function
- Show Different HTML Form On Radio Button Selection
- How to Show/Hide Div On dropdown Selection Using JQuery
Reference