Checkboxes with custom style option don't react to being un/checked with JS

Design help Custom code
1

Hello!

I’m trying to create a page with 4 cards, each presenting a service. In the form below them, are 4 checkboxes with the matching services names. I also want to be able to click on one of the card buttons (let’s say “Help me with - Analysis”), which would scroll down to the form and automatically check the matching “analysis” checkbox.

So far so good, I coded said functionality in, it’s working well. But I also wanted to custom style the checkboxes - so I select “custom” style property on them. And now, after clicking on the card buttons, the matching checkbox doesn’t look checked, but if you check it using console, it actually is checked. Meaning custom styled checkboxes for some reason don’t react to state changes done with JS.

To demonstrate this happening, I left the first 2 checkboxes “default” and the last 2 “custom”.

I already reported this as a bug to Webflow, but I’m still interested to see if there’s a workaround for this? Thanks!

Here is my site Read-Only: Webflow - Custom checkboxes
Live site: https://76825ab401320d8563506e667338984c.webflow.io/

1 Like
2

Hi @Radka,

Would you be able to try this code in Page Settings > Custom Code > Before </body> tag:

<script>
const checkboxes = (name) => {
  document.getElementById(`btn-${name}`).addEventListener('click', () => {
    let checkbox = document.getElementById(`checkbox-${name}`);
    checkbox.checked = true;
    if (
      checkbox.id === 'checkbox-analysis' ||
      checkbox.id === 'checkbox-public-speaking'
    )
      checkbox.previousElementSibling.classList.add('w--redirected-checked');
  });
};

checkboxes('public-speaking');
checkboxes('analysis');
checkboxes('consulting');
checkboxes('executive-coaching');
</script>

The custom checkboxes behave a bit differently than the default checkboxes and the class ‘w--redirected-checked’ will need to be added to the custom checkboxes when setting the checkbox as checked via JS.

Hope this helps!

1 Like
3

Hey @mww ,
Thank you for your response!
Your suggested solution did work great.
If applied to all checkboxes, the if block could also be omitted, so I ended up using this code if anyone else is interested:

<script>
const checkboxes = name => {
  document.getElementById(`btn-${name}`).addEventListener('click', () => {
    let checkbox = document.getElementById(`checkbox-${name}`);
    checkbox.checked = true;
    checkbox.previousElementSibling.classList.add('w--redirected-checked');
  });
};

checkboxes('public-speaking');
checkboxes('analysis');
checkboxes('consulting');
checkboxes('executive-coaching');
</script>

Thanks for the help with this one!

1 Like
4

Maybe somewhat different but i just had an issue using the finsweet CMS filter:
A default webflow forms checkbox would work fine and filter the content.
A checkbox set to custom however would almost always break functionality after a few css things have been redesigned…
Unless - which I seem to have reproduced a couples of times now at the end of an awful afternoon…
After every custom design change, switch the checkbox back to default and then back to custom again.
day in the life of a professional.
just hope this works tomorrow as well.