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.

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.