Is there a way to create interactions using checkboxes? For example, if a checkbox is checked, show an element, but if the checkbox is unchecked, hide that element?
Where am I?
In UXPin you can ask and answer questions and share your experience with others!
Or even set a variable to 1/Yes/checked if checked, and 0/No/unchecked if unchecked?
Yes, absolutely!
For interactions with checkboxes, conditions come in handy.
You will have to set the following conditional interactions for hiding/showing an element with checkbox:
1. Click (tap) -> If content of element - checkbox - is true -> Show an element
2. Click (tap) -> If content of element - checkbox - is false -> Hide an element
Here's an example: http://recordit.co/PkBQg53fNf
_____________________________________________________________________________
For setting a variable, it'll be very useful if you want to trigger interaction when more checkboxes are (un)checked.
After creating a variable set its default value to 0. Then each checkbox should have 2 conditional interactions (if/else).
1. Click (tap) -> Condition: if content of element - checkbox is true (checked) -> Set variable as expression- $nameofvariable + 1
2. Click (tap) -> Condition: if content of element - checkbox is false (unchecked) -> Set variable as expression- $nameofvariable - 1
After interactions are set to duplicate this checkbox X times.
Then add interaction to canvas:
1. Variable change -> Do Action -> if value of variable, eg. equals value 2
2. Variable change -> Do Action - if value of variable, eg. equals value 4
Here's a video showing this example https://recordit.co/Vrx4ITaD4z