Help! Unable to clear the Radio Button Group selections

I have several Radio Groups which are hidden & collapsed with no selections. Triggered by an event, the labels are changed in code and the Radio is displayed. Triggered by another event, the Radio is again hidden and collapsed. When the next trigger changes the labels and displays the radio, the labels are perfect but the radio buttons are all “red”, the error state of my group.

In code, before redisplaying the Radios with new labels, I have a reset function that attempts to clear out the selections. But it does not work. Can some one help me find the bug? I have tried " .selectedIndex = undefined" and " .value = null" but nothing will clear out the button selections. In fact using either turns my buttons “red”, which are the colors of the ERROR state for the group. No errors show up in the console.log and the buttons still work.

Can you help me by suggesting things to look at?

Because you have set as ‘required’.

Simply use this: resetValidityIndication( )

to reset it back to the design just like you entered the page.


Many elements have a visual cue that indicates whether they are valid or not. For example, a text input that usually has a black outline might have a red outline when its value is not valid.

The resetValidityIndication() function resets the validity indication of an element to show the element as valid. The actual validity state of the element is not affected. If the element was invalid, it remains invalid. The validity indication shows the element as valid until the element's validity is checked when the value of the element changes either by user interaction or programmatically. At that point, the element's validity indication shows the element as invalid if its value is not valid.

Thanks very much. I believe that solved my problem.