How to uncheck an option when another option is selected with Gravity Forms

Today I came across an interesting use case. I had a customer that had multiple radio button fields in his form. Each field has in turn different choices. He only wanted visitors to select one radio button across all the different fields.

Use case example

Field A has three choices (1,2,3)
Field B has three different choices (4,5,6)
Field C has three different choices (7,8,9)

When the user selects from Field A but later also selects something from field C then we want the selection in field A to be removed (unselected). This is exactly what this small jQuery snippet can do for you!

How do I enable this?

1. Check the requirements

This snippet works only in combination with Gravity forms so you will need to have Gravity Forms installed and activated.

2. Add css class.

Each radio field that needs to use this functionality will need the same css class. Navigate to the appearance tab of your field and add “gotr_limit_radio” to the css class box.

3. Add snippet.

Simply copy the snippet to an html field and make sure you wrap it between <script> Snippet goes here </script>

Need help?

Reach out by leaving a comment or send me a message through the contact form

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
itexpert
itexpert
1 year ago

Hi, nice post. I use it in one of my forms. Only have a problem with conditional logic fields. If someone click on field C who have conditional logic and then select something else from other section conditional fields are still visible on the page.

Do you have solution for that?

Scroll to Top