How to Uncheck A radio button

Question

I have two forms, one with a radio button that users must select to edit.

[form name="A"]
<li>[input type="radio" name="BookItem" value="1" /]</li>
<li>[input type="radio" name="BookItem" value="2" /]</li>
<li>[input type="radio" name="BookItem" value="3" /]</li>
[form]<p>

After "BookItem" is selected from form (A) I call the $("#EditFormWrapper").load("callEditData.cfm? ID="+ID); function to load the second form (B)

<div id="EditFormWrapper"><div></p>
<!---//  begin dynamic form generated by external file callEditData.cfm  //--->
[form id="editForm" name="B"]
<ul class="hourswrapper">
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs1" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs1" /> 2 Hours PM</li>
<li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="AM2Hrs2" /> 2 Hours AM</li>
 <li><input type="checkbox" id="TOR2Hours" class="TOR2Hours" name="TOR2Hours" value="PM2Hrs2" /> 2 Hours PM</li>
</ul>
[input type="image" src="images/submit-btn.gif" id="addBTN" name="addBTN" class="buttons" alt="SubmitRrequest" /]
[input type="image" src="images/cancel-btn.gif" id="editBTNcancel" name="editBTNcancel" class="buttons" alt="Cancel Request" /]
[/form]
<!---//  end dynamic form from external file //--->

I want to uncheck the radio button on form (A) when user click on cancel button (editBTNcancel) in form(B).

Here's my script:

$("#editBTNcancel").live("click", function(event){
    event.preventDefault();
    $("#EditFormWrapper").slideUp("fast").empty();
    //$('.TOR2Hours').removeAttr('checked');
    $('.TOR2Hours').attr('checked', false);
});

I hope I clearly state my problem, any suggestion would be greatly appreciated!

can you post the HTML containing the radio buttons. `.removeAttr('checked')` and `.attr('checked', false)` both work for me. http://jsfiddle.net/JAEsd/ also, what browser you testing these on? — Anurag, Apr 07 '10 at 00:07
`$(radio).attr('checked', false)` is correct and works for me. Are you sure you're selecting the right elements? I don't see `class="TOR2Hours"` in your radios. — bobince, Apr 07 '10 at 08:19

brock · Answer 1 · 2012-06-14T21:53:30.893

11

you can access form like so ...

var exampleForm = document.forms['form_name'];

then loop through the form

for( var i=0; i<exampleForm.length; i++ ){
   alert( exampleForm[i].type );
}

you can test for checked like so ...

if( exampleForm[i].checked )

to deselect the checked radio button try ...

exampleForm[i].checked=false;

the final code would look like this ...

var exampleForm = document.forms['form_name'];
for( var i=0; i<exampleForm.length; i++ ){
   if( exampleForm[i].type ) == 'radio' && exampleForm[i].checked == true ){
       exampleForm[i].checked = false;
   }
}

edited Jun 14 '12 at 21:53

answered Jun 14 '12 at 18:27

brock

111
1
4

Your first piece of code should say `document` instead of `documents`. Nice answer, though. – RustyTheBoyRobot Jun 14 '12 at 19:32
Is there any way to tell if a radio has been *deselected*? I've worked in frameworks so long... just realized that `onchange` is actually `onchangedtotrue`... If I had listeners on each radio in a group, in order to get the selected button, shouldn't all other listeners in that group fire off with `event.target.checked === false` each time a new one is selected? That's how checkboxes work, right? – Cody May 22 '16 at 00:42

score 8 · Accepted Answer · answered Apr 06 '10 at 23:37

8

I'm not sure exactly what you want but you might try using a reset input.

<input type='reset' />

answered Apr 06 '10 at 23:37

jeremysawesome

7,033
5
33
37

totaly agree, or as i answered not a control, but `reset` event – vittore Apr 06 '10 at 23:39
thank for your response, but the radio button is not in the same form so this wouldn't work. – user281867 Apr 06 '10 at 23:41
6

@user281867: call `reset` for the form radio buttons are in. `document.getElementById("radiobuttonsform").reset();` – vittore Apr 06 '10 at 23:54
THANKS Vittore, this document.getElementById("radiobuttonsform").reset(); works!!! – user281867 Apr 07 '10 at 00:35
Sorry this is 8 years late. If you are paying attention to clear HTML semantics, you *should* put your reset in the same form as the controls it resets. Saying "It's not in the same form" suggests your forms are put together in a confusing way. I get how you might have used the `
` elements to divide up form controls on your page, but you probably didn't need to and could have used `
`, `
`, `
` or `
` instead. Or, perhaps you have different forms which point to different endpoints, in which case you can provide separate reset controls for each.
– Simon Dell Nov 09 '18 at 12:43

score 3 · Answer 3 · answered Apr 07 '10 at 09:26

Seeing as this is pretty much the easiest DOM task there is and works in every scriptable browser, I suggest not using the jQuery methods for it:

$(".TOR2Hours")[0].checked = false;

The other thing that ocurs to me is whether your selector is correct. Did you mean to select a set of elements by class or should it be an ID selector?

score 1 · Answer 4 · answered Oct 01 '14 at 23:39

Your selector is simply wrong. If you want to uncheck the radio button from first form you should use $('input[name="BookItem"]') and not $('.TOR2Hours') :

$("#editBTNcancel").on("click", function(event){ $("#EditFormWrapper").slideUp("fast").empty(); $('input[name="BookItem"]').attr('checked', false); });

As far as which method to use to uncheck radio buttons, The following 3 methods should all work:

$('input[name="BookItem"]').attr('checked', false);
$('input[name="BookItem"]').removeAttr('checked');
$('input[name="BookItem"]').prop('checked', false);

However, check out jQuery's docs on jQuery prop() for the difference between attr() and prop().

score 0 · Answer 5 · edited Dec 25 '12 at 07:37

I use this way to solve your problem in ASP.net, check this..

radioButton.InputAttributes["show"] = "false"; 
string clickJs = " if(this.show =='true'){this.show ='false'; this.checked = false;}else{this.show='true'; this.checked = true;};";  

radioButton.Attributes["onClick"] = clickJs;

In asp.net, you can use this way to add an attribute. And you can also to add an attribute manually to the radioButton, and do the function(clickJs) to change the ckecked attributes!!!

score 0 · Answer 6 · edited Feb 09 '12 at 19:54

I just discovered a great solution to this problem.

Assuming you have two radios that need to be able to be checked/unchecked, implement this code and change what's necessary:

var gift_click = 0;
    function HandleGiftClick() {
        if (document.getElementById('LeftPanelContent_giftDeed2').checked == true) {
            gift_click++;
            memorial_click = 0;
        }
        if (gift_click % 2 == 0) {document.getElementById('LeftPanelContent_giftDeed2').checked = false; }
    }
    var memorial_click = 0;
    function HandleMemorialClick() {          
        if (document.getElementById('LeftPanelContent_memorialDeed2').checked == true) {
            memorial_click++;
            gift_click = 0;
        }
        if (memorial_click % 2 == 0) { document.getElementById('LeftPanelContent_memorialDeed2').checked = false; }
    }

:) your welcome

Don't know WHY this answer was at -1. This is closer to an Acceptable answer because **it addresses the most difficult part of unchecking a radio input -- THE EVENT SEQUENCE**. Everyone should know the obvious `checked` property -- ACTUALLY, you might not even care about this, depending on what framework you're using. **The problem is** that when you receive an event -- say, a click -- when you uncheck the radio *it may always show `checked === true`*. This may be the most well thought out answer here, by far. — Cody, Jul 17 '16 at 07:15

How to Uncheck A radio button

6 Answers6

Linked

Related