The only way the above code works is if I use a custom code to create the checkbox and not use the Form checkbox. The problem with that is I can’t figure out how to style the checkbox when checked.
<input type="checkbox" id="checkbox-id">
Here is a screen of the Ui I am trying to build with Webflow…
Hi, thanks for the reply!
Not sure if I explained my problem correctly…
This was a typo.
In the image I posted in the OP, the checkboxes with the names (Alpha, Clay, Color, Layer, Line, Profile, Shadow, Texture, Z-Depth) are made with the default Form checkbox and the problem is I can’t activate them on or off with Javascript.
On the other hand, the checkboxes on the bottom named (Thirds Grid, Cross, Diagonal, Phi Grid, Triangle A, Triangle B, etc) are made with costume Embed code. And, I can turn it on and off with Javascript without a problem. But, can’t style them as easily with Webflow, and using costume CSS has been a pain.
…
Question:
Is there a way for me to activate on or off the Form checkbox with Javascript?
With Javascript I can detect if checkbox is checked with following code
var alpha = document.getElementById('alpha').checked
But, can’t use code below to turn checkbox on or off
hi @Rafael It is hard to debug just from UI image when there is no code to check.
You can use JS loop eg. forEach to add click eventListener to listen for change and that use eg. Ternary operator to switch states or do whatever you need. Debugging only from short description with one line of code without context is more just guess than valuable help or advice.
Webflow has its own rules on predefined elements and on checkbox div element adding class w--redirected-checked when checkbox is active. This mean there is no attribute checked on checkbox input field.
So if you know how to code I will recommend use as less WF predefined elements as you can.
