Best approach for form with check boxes

Greetings!

I need to produce a “widget” that has several selection checkboxes for different dimensions of a product which will be passed along to a product search page. So, i.e. the user wants to show all products which are 2’, 5’, 10’ tall, so they select those items and press the “find my products” button.

As I launch into this, I’m wondering if there is a clever way to use symbols to produce the check box elements with each adding/removing a distinct value to a js array when toggled.

I am going to start playing around on this myself, but thought someone might be able to save me some time.

Thanks much in advance for any pointers!

I am pretty sure there are other checkboxes on the site including ones I have written my self but here is another one.

This uses symbols. You duplicate a new instance using the duplicate button.
Set the text and Image to what you want in each symbol.

The check group’s Title/alt Text field is where we get our item details that will be added to the array.
Using the title is just a simple place to put this data…


CheckBoxItems.zip (78.0 KB)

— UPDATE

This version uses the symbols display name as the data value.

In this version the first group in the Symbol has a class name of checkboxGroup
The code will look for this then its parentElement and finally the closest element with the class “.HYPE_element”

Which will be the Symbol. We then simply get the Symbol 's iID and use that to get the display name.

So now you can just name your duplicate elements by the value you want to capture in the array.
This makes it IMO a little easier to enter and you will not get tooltips that you may not want.

v2
checkboxItem.hypesymbol.zip (39.4 KB)

3 Likes