"Select Radio Button values using JavaScript"
Bootstrap 4.1.1 Snippet by Arjunverma

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <body> <br><b> Choose your favroite season: </b><br> <input type="radio" id="summer" name="set" value="Summer">Summer<br> <input type="radio" id="winter" name="set" value="Winter">Winter<br> <input type="radio" id="rainy" name="set" value="Rainy">Rainy<br> <input type="radio" id="autumn" name="set" value="Autumn">Autumn<br><br> <button type="button" onclick=" checkButton()"> Submit </button> <h3 id="disp" style= "color:green"> </h3> <h4 id="error" style= "color:red"> </h4> </body> </html>
<script> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById("disp").innerHTML = document.getElementById("summer").value + " radio button is checked"; } else if(document.getElementById('winter').checked) { document.getElementById("disp").innerHTML = document.getElementById("winter").value + " radio button is checked"; } else if(document.getElementById('rainy').checked) { document.getElementById("disp").innerHTML = document.getElementById("rainy").value + " radio button is checked"; } else if(document.getElementById('autumn').checked) { document.getElementById("disp").innerHTML = document.getElementById("autumn").value + " radio button is checked"; } else { document.getElementById("error").innerHTML = "You have not selected any season"; } } </script>

Related: See More

Vue Argon Design System
Animated Radio tab
Hexa shape button
Modal Quiz with Radio button

Questions / Comments: