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!

Weld

can you post the HTML containing the radio buttons. .removeAttr('checked') and .attr('checked', false) both work for me. jsfiddle.net/JAEsd also, what browser you testing these on? – Windhoek

Please repost your code as HTML, not as BB code – Enesco

$(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. – Damaris

For me only .removeAttribute('checked') works – Intransigence

Answer 1

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

<input type='reset' />

Athwartships

totaly agree, or as i answered not a control, but reset event – Probative

thank for your response, but the radio button is not in the same form so this wouldn't work. – Weld

@user281867: call reset for the form radio buttons are in. document.getElementById("radiobuttonsform").reset(); – Probative

THANKS Vittore, this document.getElementById("radiobuttonsform").reset(); works!!! – Weld

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 <form> elements to divide up form controls on your page, but you probably didn't need to and could have used <fieldset>, <section>, <p> or <div> instead. Or, perhaps you have different forms which point to different endpoints, in which case you can provide separate reset controls for each. – Aragonite

Answer 2

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;
   }
}

Mercerize

Your first piece of code should say document instead of documents. Nice answer, though. – Crystallize

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? – Estis

Answer 3

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?

Spano

Answer 4

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:

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

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

Hoyden

Answer 5

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

Alkaline

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. – Estis

Answer 6

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!!!

Holocaine

Answer 7

It always works, unless you set debug break points.

var auswahl_dachaufbau = document.querySelectorAll('input[type="radio"][name="dachart"]');
// Damit man Radio-Buttons auch unchecked machen kann

Array.prototype.forEach.call(auswahl_dachaufbau, function(rd) {
    // Event-Listener für Radio-Buttons 
    rd.addEventListener("mousedown", function(e) {
        let id = e.target.id;
        if (this.checked) {
            // Das Setzen der onclick-function auf diese Weise ist dafür da, damit man
            // Radio-Buttons auch unchecked machen kann ohne einen neuen Radio-Button auszuwählen
            // Seltsamerweise ist das nicht möglich ohne weiteres
            this.onclick = function() {
                this.checked = false;
            }
        } else {
            this.onclick = null;
        }
    });
});

It does not work when you set debug break points.

Silica