How can I make a checkbox check while others are uncheck

Check the image below, I want to make the 1st one checked while others are unchecked, or when you check any of them the others will be unchecked.


Thank you!

There are two options I can think of, first, you can use radio buttons to achieve this instead of the checkbox you are currently using. But if you insist on using checkbox for design purposes then you will have to use checkbox icons where you will have to build the entire logic. Let me further give you two hints on the logic you will have to build a.) You will build a condition on each checkbox to show either a checked checkbox icon or an unchecked checkbox icon. b.) You can then build a state on the parent group that will be text, so once they click a checkbox the parent group text will be updated. So the checked checkbox will be any checkbox whose text matches the parent text.

1 Like

Check this…I have documented this for myself

Demo:

https://checkboxfunction.bubbleapps.io/version-test?debug_mode=true

Editor:

https://bubble.io/page?name=index&id=checkboxfunction&tab=tabs-1

1 Like

I am unable to access the editor, can you grant access?

Thank you

1 Like

Hey @ojebodeayobami80,

The simplest way to achieve this would be via Radio buttons; see GIF for reference.

Untitled design (2)

If you must use checkboxes in your use-case, you could do the following.

Firstly we will start by making our checkboxes dynamic and giving them the standard value of no.

Then create a state on the page. This state should contain all three of your values

]

Ideally, we would use a group or button to cover the action of the checkbox and set its input to be disabled. When the user clicks what they think is the checkbox, they are clicking the group or button. This button or group would then change the state, saying that, just covering something with a group or button does not make it secure though we mitigated that risk by setting its input to disabled.

Anyway, continuing with our basic structure, once we select the following three buttons, we can change the state.

When we click the select button, we change a text state we have set up to be whatever we want though we will need a minimum of 3 unique values for this use case.

Once the state has changed, we check that via a conditional and update our checkbox as we see fit.

In my opinion though, use Radio buttons it’s a lot less work. :rofl:

1 Like

Sorry it was private.Now I have changed the privcacy settings,you can check the editor now

@newhorizoncode thank you, can you message me on Gmail at ojebodeayobami80@gmail.com

This topic was automatically closed after 70 days. New replies are no longer allowed.