How to Assign a value to checkbox

[shadsanders89]

I am trying to create a menu using a repeat group. In that group I have the service name and price with a checkbox. When the checkbox is clicked I would like the price of the associated service to be added to the total. Any advice on how to accomplish that?

[fayewatson]

Hello One way to do this is to use a custom state which will hold a list of ‘checked’ Services. Custom states are great because they allow us to ‘store’ which Services a User has selected (until the page is refreshed), and custom states will not cost you any workflows since you’re not making any changes to the database. Here is an example in the forum app:

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - Forumapp3

Here is a step-by-step:
To replicate this, you would set up a workflow which happens when the checkbox’s value is changed. For example, you would select “Elements → When an Input’s Value is Changed → Element: Checkbox”

In the above screenshots we’re just creating the When statement for when the Checkbox goes from ‘Unchecked’ to ‘Checked’. Then you’d create an action in the workflow which adds the Current cell’s service to the Selected List of Services. First, we need to set up the custom state List of Services. To do this, you would go to Element Actions → Set State → Element: checkbox_services, Custom state: Create a new custom state…

Here we’re creating the custom state List of Services on the page itself (the page’s name is checkbox_services). Bubble allows us to create a custom state on any element, and the page is considered an element. We don’t want to set the custom state on the checkbox, because it won’t be accessible to retrieve it’s information using an outside text element, since the checkbox itself is inside of the repeating group.

After the custom state List of Selected Services on the page is created, the next step is to tell Bubble what the value of that List should be when a checkbox is checked. Since we need the Current cell’s Service to be added to our list when this happens, the value of the custom state is: “Checked_Service’sSelectedServices:plus item Current cell’s Service”.

This value tells Bubble to add (or “:plus”) the Current cell’s service to our Selected Services List when a User clicks a checkbox to go from unchecked to checked. Alternatively, we need to set up another workflow which will ‘minus’ a Service from the Selected Services list if a checkbox goes from checked to unchecked (the User is trying to deselect a Service). To do this, we’d set up another workflow where the ‘When’ is: Elements → An input’s value is changed → Element: Checkbox and This Checkbox isn’t checked:

Everything is the same for setting the state on the Checkbox, and changing our Selected Services list. The only thing that’s different here will be the value (since we’re not doing :plus Current cell’s Service; we need the service to be filtered out from our list):

This part is a little tricky because there isn’t a :minus option to remove a Service from the Selected Services list. As a workaround, we are going to use the :filtered option below:

This looks confusing at first, but this :filtered option is stating that the value of our Selected Services list cannot contain any Services whose unique ID matches the ‘Current cell’s Service’s unique ID’ (the Service that the User just ‘unchecked’).

Now that the workflows for checking and unchecking a service are set up, I created a repeating group and a text element on the right side of the page which display the Services a User has selected in the repeating group, and the total price of the Selected Services in the text element.

The data source for the repeating group is our Checkbox’s Selected Services (shown below):

And the text element will display the :sum of the Selected Services “Price” field. In this example, I set every Service to be $10.

And that should work as expected! If you have absolutely any questions or if any of this was confusing please feel free to let me know. It takes a little while to set up at first, but will definitely become easier after setting this up a few different times.

[shadsanders89]

Thank you a lot. I’m going to give this a try!

[liam.j.brien]

Blown away by the level of detail in your answer.
Thank you!!

[anon18390936]

Hi,
I’m digging up this thread as I have tried to implement this solution on my app : https://bubble.io/page?type=page&name=index&id=scenarios&tab=tabs-1

The Checked workflow seems to work just fine, however the checked_options state does not seem to filter properly on “uncheck”, the display groups seem to be a bit funny… not sure where my error is, if someone could point me in the right direction it would be much appreciated !!
Thanks a lot !

[fayewatson]

Hey @anon18390936 Can you share some screenshots of the workflow you have when an element is unchecked? Or set the app to public by going to (Settings --> General --> Application Rights --> Everyone Can View)

[anon18390936]

Hi, I have actually made a workaround by creating a thing to store checked values and modifying it on check/uncheck, instead of a custom state, so that seems to do the job for now… I will explore states when i’m not in such a rush !
Happy to share my (not so elegant and a bit cumbersome) solution if someone needs it…
thanks
Marj

[valeri.kopaleishvili]

Hi
your post is create but I still can’t find a solution in that case
please take a look…
Thanks!

[fayewatson]

Hi @valeri.kopaleishvili I just took a look at the forum example again and it seems to be working, what is the question you have? Or did you mean to share a link to your app editor?

[valeri.kopaleishvili]

Problem in my case is when user choose multipule checkboxes value is saved as a one string in the database not as a different seperate inputs ( i guess so)
if i check only 1 checkbox its working and displays value correctly but in multiple case it doesn’t display any values
for detials you can have a look on my post

Checkbox list assign Value and display

Hi I have two mobile APPs which are connecting to each others through Bubble API connector (Company Side and User side) In user App I changed Dropdown “job category” to checkboxs where user is able to choose multiple choices, assined to each option and create custom state … [cuso] also create a workflow when button ‘Save’ is clicked to save the data [add] data saves in the database ( even if its multiple inputs) but data displays only if the input is only one, if there…

thank you!

[valeri.kopaleishvili]

What about if this checkbox value is stored in the database (when its checked)
and
what about if i want to delete this value from the database by unchecking this checkbox (value should be deleted)

[kngf222]

I have a repeating group with one checkbox on the left, text in the middle, and another checkbox on the right (the user is clicking one of the checkboxes, one being “good” and the other being “bad”). I need to have a “Submit” button at the end that allows the checkboxes’ results update numbers in the database for that user. How can I make this work?

[marksrunge]

The :minus has been added since this post was created so no need to filter
Thank you so very much for such a detailed explanation.

[marksrunge]

Also, anyone who wants to actually write out the records from the state to a Thing (say on clicking a Save button) may be interested in this post:

How do I create records from a list state?

I have a state that saves a table as a list, so when checking checkboxes on a repeating group it runs a workflow that adds the current row to the list state if it’s checked, and removes it if it’s unchecked. I need to run a workflow action now that creates a different record, and then relates it to the list state. So for example, if I check the box on 5 rows in the repeating group, it first adds all 5 rows to the state as a list (this works fine right now) but then I need the next step to be “…

[esme_borisoff]

Hi I have a question about this response… How come your plus: is current cell’s service? I’m trying to use my checkbox to show only verified listings vs non verified. when I say plus: its not already focused on a particular cell…?