{"id":956,"date":"2012-06-21T16:15:54","date_gmt":"2012-06-21T16:15:54","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=956"},"modified":"2012-06-21T16:15:54","modified_gmt":"2012-06-21T16:15:54","slug":"jquery-reset-radio-button-reset-radio-buttons-using-jquery","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-reset-radio-button-reset-radio-buttons-using-jquery\/","title":{"rendered":"jQuery Reset Radio Button Examples"},"content":{"rendered":"<p>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 <strong>reset a radio button and\/or reset all radio buttons<\/strong>.<!--more--><\/p>\n<h2>Examples to Reset Radio Button using jQuery<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=956\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>The following example assumes that there is a set of radio buttons that need to be rest when &#8220;Reset&#8221; button is clicked. There are 2 ways to achieve this.<\/p>\n<h3>HTML source code for all the following examples:<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;jQuery Reset Radio Button | Reset all Radio Buttons using jQuery&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;input id=\"radio1\" type=\"radio\" name=\"my_radio\" value=\"1\"&gt;1&lt;\/input&gt;\n&lt;input id=\"radio2\" type=\"radio\" name=\"my_radio\" value=\"2\"&gt;2&lt;\/input&gt;\n&lt;input id=\"radio3\" type=\"radio\" name=\"my_radio\" value=\"3\"&gt;3&lt;\/input&gt;\n&lt;input id=\"radio4\" type=\"radio\" name=\"my_radio\" value=\"4\"&gt;4&lt;\/input&gt;\n\n&lt;input type=\"submit\" name=\"reset\" id=\"reset\" value=\"Reset\" \/&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<h3>Example #1 &#8211; Use \u00a0jQuery to Reset Radio Button using attr() method\u00a0(jQuery &lt; 1.6)<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$('#reset').click(function() {\n\n$('input[name=\"my_radio\"]').attr('checked', false);\n\n});\n\n&lt;\/script&gt;<\/pre>\n<h3>Example #2 &#8211; Use jQuery to Reset Radio Button using prop() method (jQuery &gt; 1.6)<\/h3>\n<pre class=\"lang:xhtml decode:true\">&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n\n$('#reset').click(function() {\n\n$('input[name=\"my_radio\"]').prop('checked', false);\n\n});\n\n&lt;\/script&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=956\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<h5>That&#8217;s it!<\/h5>\n<p>Do you know of any other ways to <em><strong>reset radio button using jQuery<\/strong><\/em>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,90,41],"class_list":["post-956","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-reset-radio-button","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-fq","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/956","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=956"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/956\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}