JS

How to get the checked value of the radio button in javascript

This article, you will learn about “How to get the checked value of the radio button in javascript”.it will work perfectly when only one radio button. In another case, if you have the multiple radio buttons you need to check the every radio button is checked or not before getting the value from the radio button.

In javascript retrieve this value as

var  hobbies= document.getElementById('hobbies1').value;
alert(hobbies);

Code Chamber: How to get the checked value of the radio button in javascript
Html:

<body>
 <input type="radio" id="hobbies1" name="hobbies" value="Cooking"  checked> Cooking  
<input type="radio" id="hobbies2" name="hobbies" value="Dancing" >Dancing  
<input type="radio" id="hobbies3" name="hobbies" value="Study" > Study  
<input type="radio" id="hobbies4" name="hobbies" value="Travelling" > Travelling  
</body>

JavaScript Code:

<script>
		//write this code otherwise you will get error Uncaught TypeError: Cannot read property 'checked' of null
		//You need to execute the code that is trying to get the inputs after the DOM is ready.
        (function () {
            if (window.addEventListener) {
                window.addEventListener('DOMContentLoaded', domReady, false);
            }

            else {
                window.attachEvent('onload', domReady);
            }
        }());

		function domReady() {
			debugger;
			var hobbies = "";
			if (document.getElementById('hobbies1').checked) {
				hobbies = document.getElementById('hobbies1').value;
			} else if (document.getElementById('hobbies2').checked) {
				hobbies = document.getElementById('hobbies2').value;
			} else if (document.getElementById('hobbies3').checked) {
				hobbies = document.getElementById('hobbies3').value;
			} else if (document.getElementById('hobbies4').checked) {
				hobbies = document.getElementById('hobbies4').value;

			}
			alert(hobbies);

		}

    </script>

Complete Code:How to get the checked value of the radio button in javascript

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
		//write this code otherwise you will get error Uncaught TypeError: Cannot read property 'checked' of null
		//You need to execute the code that is trying to get the inputs after the DOM is ready.
        (function () {
            if (window.addEventListener) {
                window.addEventListener('DOMContentLoaded', domReady, false);
            }

            else {
                window.attachEvent('onload', domReady);
            }
        }());

		function domReady() {
			debugger;
			var hobbies = "";
			if (document.getElementById('hobbies1').checked) {
				hobbies = document.getElementById('hobbies1').value;
			} else if (document.getElementById('hobbies2').checked) {
				hobbies = document.getElementById('hobbies2').value;
			} else if (document.getElementById('hobbies3').checked) {
				hobbies = document.getElementById('hobbies3').value;
			} else if (document.getElementById('hobbies4').checked) {
				hobbies = document.getElementById('hobbies4').value;

			}
			alert(hobbies);

		}

    </script>
</head>
<body>
 <input type="radio" id="hobbies1" name="hobbies" value="Cooking"  checked> Cooking  
<input type="radio" id="hobbies2" name="hobbies" value="Dancing" >Dancing  
<input type="radio" id="hobbies3" name="hobbies" value="Study" > Study  
<input type="radio" id="hobbies4" name="hobbies" value="Travelling" > Travelling  

</body>
</html>

Output:

Leave a Reply

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