Deselecting a radio button...

[rose_premo]

I had to switch my checkboxes to radio buttons so that I could make them required before submitting my form. I have 3 separate radio buttons together that are not exclusive...they can click any one button, two buttons, or all three buttons.  However, if they click one in error, they can't de-select it.  Is this possible?  The only solution I could come up with is to add a button next to the radio buttons that would use the xfa.host.resetData() script, but I would prefer not to have this extra button...space on my form is limited.  Is there a way to put in with scripting that after the second time the user clicks on the radio button it would clear it?

Thanks in advance.

Rose.

[Niall_O_Donovan · Accepted solution]

Hi Rose,

I suspect that when you changed the checkboxes to radio buttons, you ended up with three radio buttons, BUT in three separate exclusion groups.

Your hierarchy may look like this:

This is not correct, as it does not prevent the user from selecting only one.

If you want mutually exclusive radio buttons, then drag two of the buttons into one group, so that you end up with this:

The default behaviour for radio buttons is that once a radio button in the group is selected, there will always be one of the buttons selected. You can select different buttons within the group, but but cannot deselect the group.

If you want three radio buttons that look like checkboxes then leave them in three exclusion groups.

I have a sample here that allows radio buttons to be deselectable:

http://www.assuredynamics.com/index.php/category/portfolio/changing-the-visual-appearance-of-checkbo...

In the mouseDown event you capture the current value of the radio button:

// Capture initial value of radio Button and save it as a member of the radio button object
this.initValue = this.rawValue;

Then in the mouseUp event you compare this to the new value:

// Test the captured intial value and set the radio button to
// off only if the initial value of the radio group is 
// the same as the export value for this radio button
var localExport = null;
for(var i=0;i<this.nodes.length;i++)
{
   if(this.nodes.item(i).className == "items")
   {
       localExport = this.nodes.item(i).nodes.item(0).value;
       break;
   }
}
if(this.initValue == localExport )
   this.rawValue = 0;

You need to look at the target version and the enforce javascript scoping rules.

Original script by Stefan Cameron: http://forms.stefcameron.com/

In this example there is other script changing the visual appearance of the radio buttons, but you do not need this.

Niall

[sredden1]

I'm having the same issue, but I need the radio buttons in separate groups unto themselves...

I tried using the script(s) in the mouseUp/mouseDown events, but it didn't work.

What can I do?

[radzmar]

I don't understand what your trying to do.

Please explain more detailed and provde the scripts your already used.

[sredden1]

I have several radio buttons on a form, each of them separate/singular (not in groups). I'm wanting to be able to de-select the radio buttons once they've been selected. I know I can use checkboxes instead, which is what I'd prefer, but the customer is set on radio buttons.

I've tried putting the following script in mouseDown event:

this.initValue = this.rawValue;

And this script in the mouseUp event:

if(this.initValue == this.rawValue)

     {

          this.rawValue = 0;

     }

I also tried the script in Niall's reply for the mouseUp, and it also did not work.