Here is a critical piece of code to know when placing radio buttons inside a repeater element.
This code makes it so that only one radio button can be selected at any given time across all container items. Great if you want to limit the number of selections. I searched far and wide on the forum first, and since I could not find the solution here I felt it best to post. Works like a charm!
- Create a repeater with 4 or so items.
- Drag in a radio button group to the repeater
- Edit the radio button group list down to just one option (remove required and selected by default)
- Paste below code at top of page code
You will see now that only one radio button can be selected at a time…so amazing!
SEE CODE BELOW
$w.onReady(function () {
$w("#radioGroup1").onClick( (event, $w) => {
resetRadioButtons();
let $item = $w.at(event.context)
$item("#radioGroup1").selectedIndex = 0;
} );
})
export function resetRadioButtons () {
$w('#radioGroup1').selectedIndex = undefined;
}