jquery how to uncheck radio button

Question

I was trying to solve this problem, but my reset button just can't uncheck the radio button..... :( Hope experts here can help me to solve my problem. Thx!!!!

just created the fiddle http://jsfiddle.net/8GLPC/

<input type="radio" class="radio" name="r[][9]" id="id_19" value="1|9"> <label for="id_19">Choice 1</label> <input type="radio" class="radio" name="r[][9]" id="id_29" value="2|9"> <label for="id_29">Choice 1</label> <button class="reset1" value="9">Reset</button> $(document).ready(function(){ $(".radio") .button(); $(".reset1") .button() .click(function(){ var radio = $('[name="r[][9]"]'); radio.prop('checked',false); return false; }) });

That fiddle does not have jQuery and jQuery UI enable (options on the left). Have added working answer below with JSFiddle. — iCollect.it Ltd
– iCollect.it Ltd, Commented Jul 9, 2014 at 7:52

iCollect.it Ltd · Accepted Answer · 2014-07-09 07:57:44Z

You need to refresh the jQuery button state after changing the underlying radio buttons.

JSFiddle: http://jsfiddle.net/TrueBlueAussie/BPv7F/1/

$(document).ready(function(){ $(".radio") .button(); $(".reset1") .button() .click(function(){ var radio = $('[name="r[][9]"]'); radio.prop('checked', false).button("refresh"); return false; }) });

jQuery UI Buttons create separate elements, so changing the radio button state has no immediate effect on them.

Reference: http://api.jqueryui.com/button/#method-refresh

If you view the DOM, in say Chrome's F12 DOM inspector, you will see button() creates a LABEL and SPAN preceding each radio button. The actual radio button is styled out with the class ui-helper-hidden-accessible

Ariana Lynn · Accepted Answer · 2014-07-09 08:18:31Z

Try this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <body> <h3>A demonstration of how to uncheck a Checkbox</h3> Checkbox: <input type="checkbox" class="myCheck" checked> Checkbox2: <input type="checkbox" class="myCheck" > Checkbox3: <input type="checkbox" class="myCheck" > <p>Click the "Try it" button to check the checkbox.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { $(".myCheck").prop('checked' , false); } </script> </body>

Basiclly, it unchecks all checkboxes with the class .myCheck

Collectives™ on Stack Overflow

jquery how to uncheck radio button

2 Answers 2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/BPv7F/1/

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

JSFiddle: http://jsfiddle.net/TrueBlueAussie/BPv7F/1/

Comments

Comments

Related