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