jQuery
jQuery Reset Radio Button Examples
Have you ever wondered how to use jQuery to reset radio button once it is selected, using jQuery? In this article, I am going to share easy ways to reset a radio button and/or reset all radio buttons.
Examples to Reset Radio Button using jQuery
The following example assumes that there is a set of radio buttons that need to be rest when “Reset” button is clicked. There are 2 ways to achieve this.
HTML source code for all the following examples:
<html> <head> <title>jQuery Reset Radio Button | Reset all Radio Buttons using jQuery</title> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> </head> <body> <input id="radio1" type="radio" name="my_radio" value="1">1</input> <input id="radio2" type="radio" name="my_radio" value="2">2</input> <input id="radio3" type="radio" name="my_radio" value="3">3</input> <input id="radio4" type="radio" name="my_radio" value="4">4</input> <input type="submit" name="reset" id="reset" value="Reset" /> </body> </html>
Example #1 – Use jQuery to Reset Radio Button using attr() method (jQuery < 1.6)
<script type="text/javascript" language="javascript" >
$('#reset').click(function() {
$('input[name="my_radio"]').attr('checked', false);
});
</script>Example #2 – Use jQuery to Reset Radio Button using prop() method (jQuery > 1.6)
<script type="text/javascript" language="javascript" >
$('#reset').click(function() {
$('input[name="my_radio"]').prop('checked', false);
});
</script>That’s it!
Do you know of any other ways to reset radio button using jQuery? Feel free to suggest by commenting below.