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!

Answer 1

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

Answer 2

我不确定你想要什么，但你可能会尝试使用重置输入。

<input type='reset' />

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?

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() .

Answer 5

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

Answer 6

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