Problem with clickable area interactions on checkboxes

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: https://preview.webflow.com/preview/m2-overland?utm_medium=preview_link&utm_source=designer&utm_content=m2-overland&preview=e348057f405b029548ab2869926f725d&pageId=602dc32e31893a4cd2f136fa&mode=preview
And the published test page: Ute Tray & Canopy Price Builder | M2 Overland NZ

1 Like

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.

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.

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.

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.

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.

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

:thinking:
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.

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

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

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();
});
});
1 Like

Figured out how to do this without code. If you use the checkbox label to trigger the interaction then it will trigger the interaction and also check the checkbox. Then all you have to do is make sure the label covers both the wrap and checkbox itself which is easy because it naturally does(all ya gotta do is add some padding to the checkbox label or another way). and there ya go!

2 Likes

Yep I can confirm that works, I found this out in this Finsweet tutorial, about 2 1/2 minutes in :).

Thank you for your excellent solution.
I assigned z-index value to checkbox label to cover entire checkbox area, and It works.
Now the checkbox label works like a whole checkbox field and interaction problem solved!

Nice. Loved the hack :heart: It solved my problem. Thanks @cankanoa