How can I keep custom radio buttons selected once clicked in Webflow using custom code?

To keep custom radio buttons selected once clicked in Webflow using custom code, you can utilize JavaScript to add and remove classes dynamically.

First, ensure that you have unique IDs assigned to each radio button. This will make it easier to target and manipulate them with JavaScript.

Next, you'll need to write JavaScript code to handle the click event and manipulate the classes accordingly.

Here's an example:

```html

```javascript
// JavaScript
const radioButtons = document.querySelectorAll('input[name="custom-radio"]');

radioButtons.forEach(button => {
button.addEventListener('click', () => {
radioButtons.forEach(button => {
const customRadio = button.nextElementSibling;
customRadio.classList.remove('selected');
});

const customRadio = button.nextElementSibling;customRadio.classList.add('selected');

});
});
```

In the above code, we use `querySelectorAll` to get all the radio buttons by their name attribute. Then, we iterate through each button and add a click event listener. When a button is clicked, we remove the "selected" class from all radio buttons' custom elements (in this case, `

In your Webflow project, you would need to add this custom code to an external JavaScript file and include the file on the pages where you want the custom radio buttons to function.

Lastly, don't forget to style the "selected" class in your Webflow project's custom CSS to visually indicate that the radio button is selected.

With this approach, the custom radio button will stay selected once clicked, and the state will be reflected even if the page is refreshed or navigated to different sections within your website.