Help with changing checkbox value with Javascript

I am trying to use Javascript to activate the checkbox on & off but can’t make it work.

I am using a Form checkbox and using the following code…

document.getElementById('chackbox-id').checked = "true";

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…

Any Help is Appreciated!

hi @Rafael and welcome to forum.

  1. you have 'chackbox-id' vs id="checkbox-id"
  2. you can set option custom checkbox in WF.

  1. add embed element to add custom CSS to style your checkbox the way you need

Hi, thanks for the reply!
Not sure if I explained my problem correctly… :confused:

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

document.getElementById('alpha').checked = true;

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.

1 Like

I think this is the solution to my problem. Thank you very much for the help!

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.