Toggle is always false

Hey all, I have a toggle but it always returns check as false.

<label class="toggle toggle-init" id="toggle1">
<input type="checkbox" class="toggle" checked />
<span class="toggle-icon"></span></label>
   document.getElementById("toggle1").addEventListener("change", this.publish);

Why would this be? Thanks!

document.getElementById("toggle1").addEventListener("change", this.publish);

toggle1 => <label class="toggle toggle-init" id="toggle1">

You need change this to id of checkbox:

<input type="checkbox" class="toggle" id="test1" checked />

document.getElementById("test1").addEventListener("change", this.publish);

And would be good to see what is in your this.publish handler

Thanks, both. Inside my function, I’m just console logging it out to test:

        const app = this.$f7;
        var toggle = app.toggle.get('.toggle');

I got around it the old fashioned way:

var checkedValue = document.querySelector('.toggle:checked').value; if (checkedValue) { ... do stuff }

Still unsure why app.toggle.get wasn’t working as expected…

1 Like