Forum Academy Marketplace Showcase Pricing Features

Weird behavior in Ionic Checkbox

Need help
#1

I’m trying to simulate the Radio Button element with Ionic Checkbox but I’m getting a very weird behavior that I cannot understand why.
This is the set up:

image

The Custom States are:

  • CC (for CreditCard option): set to YES (default)
  • BS (for Bank Slip option): set to NO (default)

So, when I click the Credit Card’s Ionic Checkbox, the Bank Slip checkbox should be ‘unchecked’ and vice-versa. Also, when a given checkbox is checked, it cannot be unchecked by clicking on it, only by clicking on the other checkbox thus simulating the radion button behavior.

I have same configurations for both Ionic Checkboxes:
image
image

image
image

And in the workflow:

image
image347×658 14.4 KB

image
image347×657 15 KB

I tried everything I could and it is NOT WORKING!!!
Preview:
image

.
1st interaction:
image
It worked!!! :slight_smile:

.
2nd interaction:
image
Damn it!!! :frowning:

.
I don’t understand why since all configurations seem ok to me…
Does anybody know what is wrong??
Appreciate any help!
John

#2

That’s just the initial (default) status. Your custom states aren’t actually influencing anything currently. You’re just clicking the checkboxes on.

#3

Hey, @SerPounce tks for your response but I think that’s the real problem, despite the custom states are changing their values.

When I click the BS checkbox (in the 1st interaction) the CC checkbox got unchecked automatically (as it supposed to be!), thus I’m assuming the custom states do have some influence in their preset value as CC checkbox was unchecked when CC custom states changed to “NO”.

But, when I click the CC checkbox (now with preset status = “unchecked”), the BS checkbox didn’t change as it should do!!!.. That is driving me nuts!!!
:confused:

#4

Here is the reference text:
“This (the preset status) continues until the user clicks on the element… then the state will be determined by their selection…”

Screen Shot 2021-04-06 at 4.21.17 PM
Screen Shot 2021-04-06 at 4.21.17 PM1404×444 57.6 KB

There is a MUCH easier way to do this. Just create a circular group and insert a check icon into the group. Then use your states as you have them to display or hide the check in the circle.

#5

@SerPounce thanks for the explanation! I should have read the reference manual… My bad!
Now, I’m not sure if I understand your suggestion… What do you mean by “circular group”? Should I use other element instead of Ionic Checkbox (such as an Icon)?

#6

Yes, exactly. I don’t think the checkbox will work under any circumstance cos there’s no way for you to influence checkbox A’s value based on checkbox B’s click.

I use the technique I’m describing all over my apps and it’s pretty straightforward and 100% flexible. Here are the steps:

  1. Place a check icon on the screen (not a checkbox, but an actual icon).
  2. Put it in a group and make the group 100% round. (I use square groups, but you seem to be in the round frame of mind).
  3. Call the first group “GroupBS”.
  4. Repeat steps 1 - 3 and call your second group “GroupCC”.
  5. Make the icons not visible on page load and add a condition to each that says when the relevant custom state is yes, show the icon.
  6. Add a workflow step that says “when this group is clicked” change the relevant state to yes and the other to no as you have it.
  7. You can then get all kinds of fancy with coloring the group’s background color and border based on the states.
2 Likes
#7

@SerPounce gotcha!!! TKS!

1 Like