CODEWITHSUNDEEP
javascriptjqueryradio-buttondynamic-forms
user281867
user281867

Reputation: 587

How to Uncheck A radio button

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!

Upvotes: 16

Views: 75613

Answers (7)

siffkroete
siffkroete

Reputation: 51

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.

Upvotes: 0

Joel Kornbluh
Joel Kornbluh

Reputation: 1437

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

Upvotes: 1

Jason SP Lin
Jason SP Lin

Reputation: 1

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

Upvotes: 0

brock
brock

Reputation: 111

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

Upvotes: 11

Jacob Gaiski
Jacob Gaiski

Reputation: 11

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

Upvotes: 0

Tim Down
Tim Down

Reputation: 324587

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?

Upvotes: 3

jeremysawesome
jeremysawesome

Reputation: 7254

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

<input type='reset' />

Upvotes: 8

Related Questions