I’d like to allow users to “uncheck” a radio button group, much like you can do with a checkbox group. I have code set up such that when they select the same answer that is already selected, the value is change to null. However, the display doesn’t show that change until they click anywhere else on the screen, making it seem like it is still selected. Is it possible to simulate a mouse click? Or is there some other work around so that the user can see that they have cleared their answer when they reclick is?
Hello! Check this thread and see if it helps: https://www.wix.com/velo/forum/coding-with-velo/help-unable-to-clear-the-radio-button-group-selections
Thanks Emmy - I had actually found that thread researching before I posted. Unfortunately, it doesn’t address my issue.
Could you post the code you’re using to uncheck the button? Another workaround you might consider is adding a small “clear” button.
The clear button is a last resort - the format of the page will make that hard to make unobtrusive.
Here’s the code. It works as expected to clear the value, but the user doesn’t see that it is cleared until they click anywhere else on the page.
let currentValue ;
$w ( ‘#radioButton’ ). onChange (( event ) => {
currentValue = $w ( ‘#radioButton’ ). value ;
})
$w ( ‘#radioButton’ ). onClick (( event ) => {
if ( currentValue === $w ( ‘#radioButton’ ). value ) {
$w ( ‘#radioButton’ ). value = null ;
}
})
Hi Bethany!
That’s weird – your code seems to be working fine for me on my end.
One thing to note is that when I deselect, the button I clicked is still in “Focus” (in this case it’s a gray outline) until I click out of it. Maybe the Focus design of your button looks similar to the Selected version?
That does it! I changed the background fill on the focus design and it’s working as desired now. Thank you so much! Such a simple thing to fix but for some reason my brain just didn’t go there.
Haha happens! Glad it worked 