Problem with clickable area interactions on checkboxes

[livstrawbridge]

I’ve got a product configurator that turns images on and off when a checkbox is selected.

Problem is, I can’t make the whole area (the checkbox and the checkbox label) to work together.

For example, if you click directly on the checkbox, the image will appear, then click again, it will disappear. But, if you click on the checkbox and then click on the checkbox label or the checkbox field a couple of times, the interaction reverses and doesn’t marry up to when the checkbox is selected. The images are only meant to appear when a checkbox is selected.

I should mention that it works in the preview how it should, but on the published site it doesn’t.

Oddly, the radio buttons work fine wherever you click them (which you can see working in the next slide).

I hope that makes sense. Any ideas why this is happening?

---

Here is my public share link: Webflow - M2 Overland
And the published test page: Ute Tray & Canopy Builder | M2 Overland NZ

[Marius1989 (Marius)]

Did you assign the same interaction to the checkbox, the label and the parent div for the same and only purpose?
I am a little bit confused.

[livstrawbridge]

only on the first checkbox to try some things. If you try the other ones further below they only have one interaction set to the checkbox only. Either way though, it doesn’t matter which one (checkbox, label or field) you set the interaction to, they all seem to be separate and don’t work as one.

[Marius1989 (Marius)]

Can you try to assign the interaction to the parent div (“Select hold”) and test in on the live staging site?
I will have another look at it then.

[livstrawbridge]

Yep sure thing, I’ve set the interaction on the top 3 (toolboxes, drawer, rack). The interaction doesn’t seem to work at all now.

[Marius1989 (Marius)]

Quite tricky to say because there is not a lot I can test here, as in the preview it works and on the live site it doesn’t.

[livstrawbridge]

Yeh exactly!! That’s why I thought it might be a bug?

[Gail_Ranger]

I don’t thing that the UI interaction you want can be implemented using toggle logic because of how Webflow is handling the checkbox. For whatever reason (possibly bug?) the checkbox label has a separate event to the checkbox field. Which is why it seems like the interaction reverses. The closest to a workaround here is probably to add the interaction to the checkbox label as well. You would still have a ‘toggle glitch’ but it would be less noticeable most of the time. Alternatively you would have to wrap your click events in custom code and handle the UI in js or build the UI with another element (custom embed might be an option) that doesn’t exhibit this behaviour.

[Marius1989 (Marius)]

Agreed.
A simple toggleClass jQuery snippet would solve this in no time.
Funny, because I complained about this missing in-built feature on another thread at the same time, @Gail_Ranger posted here.
This thread is a good tutorial how to solve your issue @livstrawbridge

Dram's simple add-remove class tutorial

This is the a very simple tutorial inspired by my mate @Keejo question he recently asked me: how would I go about changing some properties of the elements that are not supported by interactions? I had an answer to that, but then I realized that it may be a useful quality-of-life little hack for everyone to learn to be able to fix one of the most glaring problems of IX - the fact that it won’t allow us to target and affect every property of the elements. Obviously this is not going to replace i…

For me, this would be the quickest, cleanest and best to maintain solution.
Just my 2 cents.

[livstrawbridge]

Thanks @Marius1989 , this tutorial helped me and then I found some toggle script that worked specifically for checkboxes.

$(document).ready(function() {
$('#checkboxid').change(function() {
    $('.classnameofdiv').toggle();
});
});