Deselect a radio button by clicking on it again

29 views
Skip to first unread message

Mayank Pandey

unread,
Aug 14, 2021, 4:24:22 PM8/14/21
to Developing Interactive Simulations in HTML5
Hello,

It's been a while and I am here with another question, I was wondering if there is a way to deselect a radio button, in the sense that I have a Horizontal Aqua Radio Button Group and I want it such that let's say if 2 is selected then if I click on 2 again it should get deselected. To better explain I have two screenshots of how I want it to be like. I am not sure what listener to use here, because if I use the listener for the button group, property.link only works when I change my input from say 2 to 3 or 4 to 5 etc. The property.link doesn't work when you click an already selected item. I was thinking of checking if the user has clicked on a radio button two times (assuming we start from a deselected radial group) then we can reset the property for that radio button group to deselect. If there is a better way to do this please let me know I would appreciate it. 
Screen Shot 2021-08-14 at 3.49.56 PM.png
Screen Shot 2021-08-14 at 3.50.07 PM.png

cmalley

unread,
Aug 15, 2021, 10:44:32 AM8/15/21
to Developing Interactive Simulations in HTML5
To review: A radio button has an associated value and Property. When you click the radio button, it sets the Property to the value.  A radio-button group is a set of radio buttons that with different associated values, but all associated with the same Property.  The radio buttons in the group present a set of mutally-exclusive choices to the user, and exactly 1 of those radio buttons will always be selected.

First, let me explain why clicking on a selected radio button doesn't call the Property listener (the "link"). Property only notifies listeners when a value has changed.  If you click a radio button that is already selected, the radio button does set the Property value. But Property will see that the value is the same, and will not notify listeners, because nothing has changed.  If you need to notify listeners regardless of whether a Property's value has changed, you can call the notifyListenersStatic method. If you need help pursuing that direction, let me know.

Now back to what you're trying to do... Clicking on a selected radio button and having DESELECT is very odd. It's not how radio buttons generally behave, it's not what users expect. And if it were to deselect, what would become selected? If you're thinking there would be no selection, that's (again) not how radio buttons wok - they are a set of mutually-exclusive choices, and exactly one button is always selected.  So I'm wondering if radio buttons might be the wrong type of UI component for what you're trying to accomplish. Can you explain your actual use-case? Maybe I can suggest alternatives.

Chris Malley
PixelZoom, Inc.

Mayank Pandey

unread,
Aug 15, 2021, 12:17:00 PM8/15/21
to Developing Interactive Simulations in HTML5
Hello Chris,

Thank you so much for explaining it to me and now I have a better idea about what I was missing so that helps me a lot. But, coming back to what you said, you are correct I was misguided in what I was trying to do, for some reason it did make sense at the time because I was trying to mimic the behavior of a checkbox to make things consistent in a way but then that just makes the radial group a checkbox group and it's definitely odd so I put an end to that venture. I appreciate the information about the notifyListenersStatic method, it might come handy some other time. Thank you so much for the help!

Regards,
Mayank Pandey

Reply all
Reply to author
Forward
0 new messages