Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

How to deselecting radio buttons?

Avatar

Level 2

Here's my dilemma.I have a form with a radio button list. The list is located in one section of the form. There are two options available. It is currently set so the user has to select one or the other button. I need to add the ability for the user to deselect a radio button in this section if he/she didn't intend to complete this section. How do I do that? I'm not real familiar with adding JavaScript codes to forms so step-by-step instructions would be really helpful.

Thanks!

7 Replies

Avatar

Level 10

Hi,

Have a look at this example: http://assure.ly/j1KdNq. It works on the basis of the user holding the Shift button while clicking the radio buttons. Obviously the user will need an instruction on this.

Hope that helps,

Niall

Avatar

Level 3

A simple work-around that I have found helpful is to use two checkboxes instead of a pair of radio buttons. You can use the action builder to create actions so that when one is checked the other is set to null or unchecked. This way, they function like radio buttons but you retain the ability to deselect them. You can then change them to appear as sunken circles so that they do not look any different.

Avatar

Level 2

Thank you for the workaround. It sounds like a perfect solution. How do I create the actions to set the other box as null or unchecked?

Avatar

Level 3

Here is how to build your actions:

Add two check boxes to your form. It is helpful to name them in the hierarchy for ease of use.

Right click on checkbox 1 and select     Actions>Add Action. The Action Builder window opens.

Under CONDITION, set the condition to be "When CheckBox1 is checked" by choosing "is checked" from dropdown. If you opened the Action Builder window without right clicking on the CheckBox object, then you will also need to define which object you are editting

In Select a Result Dropdown, choose "Set the Value of a Field" and select CheckBox2 from hierarchy (a window opens to display the heirarchy to select an object from)

Change the result field dropdowns to be: Set the value of CheckBox2 "TO BE" "UNCHECKED"

Repeat these actions for the second CheckBox.

Afterwards, select each checkbox, and in the Object window, select the Field tab. From there, there is an Appearance dropdown. Use that to select the appearance of your CheckBox. I believe that Sunken Circle is the standard appearance for radio buttons

Avatar

Level 2

That worked like a charm. Thank you so much!!!! I really appreciate your help.

Avatar

Employee

Radiobuttons are based on an exclusion group. one will be always selected as they are mutually exclusive. Sounds like the checkBox solution is the right one here for this use case, as you can select multiple, one, or none. You could also provide a third choice representing "no selection".

KJ

Avatar

Former Community Member

I Im currently building a form with multiple radio button groups with child radio button groups and have it working

example scenario

a checkbox to say user wants that section ( if unchecked clears all radio buttons)

if a user clicks a child it must turn on the parent etc

so here is some code examples I used

on the radio button group under change

if ( pg1.suby.subrad.rawValue > 0 )

then

pg1.rad1.rawValue = 1

endif

if ( pg1.rad1.rawValue > 1 )

then

xfa.host.resetData("xfa.form.form1.pg1.suby.subrad")

endif

basically if subrad has any value then rad 1 needs turned on

if the paren is set to anything but one the reset this sub group

if you need a full example of a parent with 3 choices each with a 3 child choices and master check box let me know i figured that short exerpt should sufice though