Bind change event handler to radio button with JavaScript/jQuery
This post will discuss how to bind the change event handler to the radio button in JavaScript and jQuery.
1. Using jQuery
The idea is to bind the change event handler to the radio button using the .change(handler) method. Now, an alert would be displayed whenever a radio button is selected.
JS
|
1 2 3 4 5 |
$(document).ready(function() { $('input[type=radio][name="contact"]').change(function() { alert($(this).val()); // or, use `this.value` }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> </div> |
The .change(handler) method is a shortcut for .on("change", handler). Therefore, the following code is the same as above:
|
1 2 3 4 5 |
$(document).ready(function() { $('input[type=radio][name="contact"]').on('change', function() { alert(this.value); }); }); |
2. Using JavaScript
In vanilla JavaScript, you can use the onchange property to specify an event handler to receive change events. Now, the onchange event handler is fired whenever any change is made to the radio button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email" onchange="getValue(this)"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone" onchange="getValue(this)"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail" onchange="getValue(this)"> <label for="mail">Mail</label> </div> </div> </body> <script> function getValue(radio) { alert(radio.value); } </script> </html> |
Note that it is bad practice to mix JavaScript with HTML markup. Alternatively, you can select the radio group using the document.querySelectorAll() and handle the change event with EventTarget.addEventListener() method.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <body> <div id="container"> <p>Select your preferred contact method:</p> <div> <input type="radio" id="email" name="contact" value="email"> <label for="email">Email</label> <input type="radio" id="phone" name="contact" value="phone"> <label for="phone">Phone</label> <input type="radio" id="mail" name="contact" value="mail"> <label for="mail">Mail</label> </div> </div> </body> <script> var radios = document.querySelectorAll('input[type=radio][name="contact"]'); radios.forEach(radio => radio.addEventListener('change', () => alert(radio.value))); </script> </html> |
That’s all about binding change event handler to radio button with JavaScript and Query.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)