jquery-reset-radio-button – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Thu, 21 Jun 2012 16:15:54 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 jQuery Reset Radio Button Examples https://theextremewebdesigns.com/blog/jquery-reset-radio-button-reset-radio-buttons-using-jquery/ https://theextremewebdesigns.com/blog/jquery-reset-radio-button-reset-radio-buttons-using-jquery/#respond Thu, 21 Jun 2012 16:15:54 +0000 https://theextremewebdesigns.com/blog/?p=956 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.

]]> https://theextremewebdesigns.com/blog/jquery-reset-radio-button-reset-radio-buttons-using-jquery/feed/ 0 956