How can I create checkboxes with value?

I am designing a travel website and need to add checkboxes which when selected shows a value.

It’s like a tour cost calculator. For instance, when the user selects “Paris” it shows the destinations to select and the user can select the checkboxes, and it shows the price on a div block.

When the user selects multiple destinations, it shows the total price of all the selected destinations in the same div.

Is it possible? How do I create something like this?

@Arialwal you’ll probably have to use some jQuery to accomplish this. You can use the checkboxes being checked / unchecked to trigger a function that changes content on the page such as the total cost and available destinations.

You can learn about triggering a function using checkboxes here: javascript - jQuery checkbox checked state changed event - Stack Overflow

Without further understanding of what you are trying to accomplish or an example I’m not sure how much more help I can offer. Something like a drawing or example that someone else has created would be useful.

Thanks,

-Sam

Hello @Arialwal,

I think what you are trying to accomplish can be done with this tutorial from the great @sabanna about MixitUp. Multi-dimensional filtering for CMS content

I tried but couldn’t find an example. I am new to coding so its difficult for me.

Here is a better explanation:

  1. There are five checkboxes and each has a different destination on it.
  2. When a user, clicks on a checkbox, it shows the “price” of that destination (Only numbers).
  3. When a user selects multiple checkboxes, it sums up the “price” of each destination and shows the value (number).

Is this possible?

Hey @Pablo_Cortes,

I looked at it, but is doesn’t work. I need to sum up the value of each destination and show it in a different section on the same page. Ideally below the form.

Are you able to make a graphic mock-up or prototype of what you are trying to accomplish?

It’s like a calculator, each check on the checkbox will be added and the total sum is shown below.

I’ll try to find an example.

Here is a very basic example that I threw together using jQuery:

Hello @Arialwal,

Then maybe you need to use https://www.calconic.com/, there you can create a custom calculator and embed it on you webflow site.