Webflow sync, pageviews & more.
NEW

How can I use JavaScript to activate and deactivate a checkbox in Webflow? The code I'm currently using only works when I create a custom checkbox, but I can't figure out how to style it when it's checked.

TL;DR
  • Use JavaScript to set .checked = true/false or toggle with .checked = !checkbox.checked on a uniquely identified checkbox.
  • Style default checkboxes in Webflow using the Designer's Checked state or for custom checkboxes, toggle a class via JavaScript and style that class in Webflow.

You're trying to toggle a checkbox using JavaScript in Webflow and need help with styling the checkbox when it's checked. This involves both activating/deactivating the checkbox and ensuring you can apply visual styles depending on its state.

1. Use JavaScript to Toggle the Checkbox State

  • Ensure your checkbox has a unique ID or class, such as #myCheckbox or .my-checkbox.

  • Use JavaScript like this to change its state:

  • Check the checkbox:
    document.getElementById('myCheckbox').checked = true;

  • Uncheck the checkbox:
    document.getElementById('myCheckbox').checked = false;

  • Toggle the checkbox:
    ```js
    const checkbox = document.getElementById('myCheckbox');
    checkbox.checked = !checkbox.checked;
    ```

  • This can be triggered on a button click or other interaction.

2. Style the Checkbox When Checked (Without Custom Checkbox)

  • Default checkboxes are difficult to style deeply, so use the Webflow default checkbox element for easy management.

  • In Webflow, when you drag in a Checkbox element, it creates a Checkbox + Label structure. To style based on the checked state, style the Checkbox Wrapper using Webflow's built-in States:

  • Select the Checkbox in the Webflow Designer.

  • In the States dropdown (top right selector), choose Checked.

  • Apply styles (e.g., background color, icon, etc.) to the element (like the Checkbox or its Label) while in the Checked state.

  • Webflow uses a class like .w--redirected-checked internally when checked, but using the state selector avoids manual targeting.

3. If You're Using a Custom Checkbox

  • If you're hiding the native checkbox and using a <div> or similar element instead:

  • Manually toggle a class on your custom checkbox container via JavaScript:

    ```js
    const fakeCheckbox = document.querySelector('.custom-checkbox');
    fakeCheckbox.classList.toggle('checked');
    ```

  • Then style .custom-checkbox.checked in Webflow Designer to show it as active.

4. Important Notes

  • Avoid mixing native and custom checkboxes unless you have a strong use case. Native checkboxes work better with accessibility and form submissions.
  • To trigger Webflow interactions based on checked state, use the Checkbox Changed trigger in Webflow’s Interactions panel.

Summary

To activate/deactivate a checkbox with JavaScript in Webflow, use .checked = true/false. For styling, use Webflow’s static Checked state selector for default elements or toggle a class programmatically if you're using a custom checkbox layout.

Rate this answer

Other Webflow Questions