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

LVL 2
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

scrathcyboyCommented:
on click -- clear all of the radio buttons in the SAME group, then check the one that was clicked.
Michel PlungjanIT ExpertCommented:
Can I make some constructive suggestion that will make your and your users' life easier?

Make it a checkbox as it should be.

If you need a radio that can be toggled off, it does not conform to user experience

If you have
yes, no and not answered, use a dropdown or 3 radios

Can you give some good reason to toggle a radio?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
BILL CarlisleAPEX DeveloperAuthor Commented:
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"
Your Guide to Achieving IT Business Success

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Michel PlungjanIT ExpertCommented:
And that is how the work. Unless it is an important concious choice to reset a radio group to not at all checked as in "have you stopped beating your wife yet? (o)yes (o)no"
, I would always show a group with one checked e.g. With a neutral choice.
Michel PlungjanIT ExpertCommented:
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];
}
BILL CarlisleAPEX DeveloperAuthor Commented:
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!
Michel PlungjanIT ExpertCommented:
Sorry pls change [] to {}
BILL CarlisleAPEX DeveloperAuthor Commented:
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

Michel PlungjanIT ExpertCommented:
But ids need to be unique in valid HTML
BILL CarlisleAPEX DeveloperAuthor Commented:
Thank you! Went with the standard "None"
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.