Link to home
Start Free TrialLog in
Avatar of BILL Carlisle
BILL CarlisleFlag for United States of America

asked on

How do I change a radio button to toggle onclick?

How do I change a radio button to toggle onclick? I may not want any in the group to be clicked after clicking one..


<input id="RADIO2" value="3" onclick="setRB(this,'RADIO2');" type="radio">
function setRB(pthis,pRadioGrp){
   var lchecked = pthis.checked;
   alert(lchecked);  // IE shows false, true, false, etc 
		     // Firefox shows true, true, true, true, 
  // Below Works in IE7 but not Firefox 3.6 
  if(pthis.checked){
    $('[id^="'+pRadioGrp+'"][value="'+lval+'"]').attr('checked',false);
  } else {
    $('[id^="'+pRadioGrp+'"][value="'+lval+'"]').attr('checked',true);
  }
}

Open in new window

Avatar of scrathcyboy
scrathcyboy
Flag of United States of America image

on click -- clear all of the radio buttons in the SAME group, then check the one that was clicked.
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of BILL Carlisle

ASKER

scrath - please look at the comments in the code... I need to know the previous state on the clicked RB so I know what to do.. if I have the onclick event on the RB and show this.checked
IE - shows false and true depending on the previous state.
FF - shows true always, because you just clicked it and as Sean said.. a RB is never unchecked when clicked.

Sean - you gave me the idea to add another RB choice of "None"... checkboxes would not do it because the user experience of chkbxs is that they can check one or many... I would have to clear the other ones when they select a different one... as RB act..

I'm going to see if the user likes the idea of "none" -- but my boss is asking for this functionality in case someone clicks and changes their mind.

How could I do it if he decides he definately wants to "uncheck" a radio button.
if you have 3 in the RB group and click one, now, you can not get back to "no buttons selected"
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
PS - why use ID when you pass the radio which has an ID - radiogroup is based on NAME, not ID

<input name="radioGroup1" id="RADIO1" value="2" onclick="setRB(this);" type="radio">
<input name="radioGroup1" id="RADIO2" value="3" onclick="setRB(this);" type="radio">

var isChecked = ["RADIO1":false,"RADIO2":false]; // default unchecked
function setRB(pthis){
  pthis.checked=isChecked[pthis.id];
  isChecked[pthis.id]=!isChecked[pthis.id];
}
Firefox gives me this just loading the page:

missing ] after element list
[Break On This Error] var isChecked = ["RADIO1":false,"RADIO2":false]; // default unchecked

IE on load is fine but once I click a RB it gives a useless error..

yes, good point about the ID.. I am new to jQuery and got carried away.. ha!
Sorry pls change [] to {}
Oh, I should have caught that...
I see what you are doing.. you are saving the last checked state.. for RADIO1 lets say..
but now I see why I was using ID... because I am building these radio buttons from my own code.. APEX doesn't know about these radio buttons...

and so the group is the ID and I get the value to set a page ITEM onclick.
so I clear all


I don't use the name attribute because APEX barfs when u submit the page...

So, I would have to save the last checked state of each radio button in the group...
Wow..



generated by htp.p() in cursor loop
<input id="RADIO2" value="3" onclick="setRB(this,'RADIO2');" type="radio">
<input id="RADIO2" value="5" onclick="setRB(this,'RADIO2');" type="radio">
<input id="RADIO2" value="22" onclick="setRB(this,'RADIO2');" type="radio">
<input id="RADIO2" value="14" onclick="setRB(this,'RADIO2');" type="radio">

Original...
function setRB(pthis,pRadioGrp){
   var lval=pthis.value;
   $('[id^="'+pRadioGrp+'"]:checked').attr('checked',false);
   $('[id^="'+pRadioGrp+'"][value="'+lval+'"]').attr('checked',true);

   var concat = '';
   $('[id^="RADIO"]:checked').each(function(index) {
	 concat = concat +':'+ $(this).val();
    });
   $s('P2_MY_ITEM',concat.substring(1));
   //alert($v('P2_MY_ITEM'));
}

Open in new window

But ids need to be unique in valid HTML
Thank you! Went with the standard "None"