Toggle button pressed state w/o JavaScript


(Bob) #1

All I’m trying to do is create a checkbox in a form. It’s not an HTML form, just images from Sketch to look like a form. I really need the ability to let the user check the box by clicking and uncheck the box by clicking again.

I’ve tried setting the default, hover, pressed states but I’m struggling to figure out how to toggle between states for the same button.

Please tell me this Is possible without JavaScript. :slight_smile:


(Mark Hunte) #2

Yes it is and probably more than one way…

Here is one using timelines.

Element Checkbox.hype.zip (23.8 KB)

I used text for the check, you can do similar with your images.


Pressed state of a button staying in pressed state ... how?
(Bob) #3

Oh hell, that makes good sense. Well thank you very much for the quick response and the example. You solved my problem. :slight_smile:
Have a great weekend Mark!


#4

Sorry to revive an old topic but I had a question regarding the ‘Element Checkbox.hype.zip’ file posted above. What is the best way to duplicate the checkboxes? I wanted 20-30 checkboxes that I could check and uncheck, once all the checkboxes are checked an animation or sound would play. I attempted to copy the elements but they don’t seem to function beyond the original 2.

Thanks for any help, cheers!


(Mark Hunte) #5

I posted a different one here that borrows from this but uses symbols.

See updated version here

To get your all checked animation. Just add some code to count the number of selected in the window.selectedCheckBoxes array, if the number is n# then do something.


#6

Thank you very much Mark, this is exactly what I needed. :grin: