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

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/

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

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