I have designed a toggle-switch with CSS and HTML but I want to be able to toggle/change the toggle switch with javascript.

How do I go about this, you can check out the code in this jsfiddle link

<div id="activate" class="toggle-switch" data-ts-color="green">
  <label for="ts4" class="ts-label">Activate Account</label>
  <input id="ts4" type="checkbox" hidden="hidden">
  <label for="ts4" class="ts-helper"></label>
</div>

My Javascript: but it does not work

if (false) {
    // turn toggle switch off
    $("#ts4").attr("checked", false);
    $('#activate').click();
} else {
    // turn toggle switch off
    $('#ts4').attr("checked", true);
    $('#activate').click();
}

I want to be able to toggle the toggle switch programmatically when? I get a value from the database

I have designed a toggle-switch with CSS and HTML but I want to be able to toggle/change the toggle switch with javascript.

How do I go about this, you can check out the code in this jsfiddle link

<div id="activate" class="toggle-switch" data-ts-color="green">
  <label for="ts4" class="ts-label">Activate Account</label>
  <input id="ts4" type="checkbox" hidden="hidden">
  <label for="ts4" class="ts-helper"></label>
</div>

My Javascript: but it does not work

if (false) {
    // turn toggle switch off
    $("#ts4").attr("checked", false);
    $('#activate').click();
} else {
    // turn toggle switch off
    $('#ts4').attr("checked", true);
    $('#activate').click();
}

I want to be able to toggle the toggle switch programmatically when? I get a value from the database

• javascript
• jquery
• html
• css

• 3 You have syntax error in javascript. Brackets for if are not closed. – ElChupacabra Commented Sep 21, 2017 at 11:04
• 1 works fine for me, check again. – bhansa Commented Sep 21, 2017 at 11:05
• 1 Unclear of the issue - the fiddle you posted works... – Stuart Commented Sep 21, 2017 at 11:06
• Only } were wrong in that, and you just edited, then there is no error left. – Durga Commented Sep 21, 2017 at 11:07

3 Answers 3

Two things:

1) Syntax in javascript, you didn't close "if" brackets. 2) You didn't check use of jQuery in JSFiddle. It won't work without that. That's working example:

if (false) {
  // turn toggle switch off
  $("#ts4").attr("checked", false);
  $('#activate').click();
} else {
  // turn toggle switch ON
  $('#ts4').attr("checked", true);
  $('#activate').click();
}

https://jsfiddle/a99dkxp1/4/

You should use prop() instead of attr(), since attr only sets the attribute with the given value without any "intellingence" and checked is a marker attribute, which does not need to have a value at all. prop() has such "intelligence" implemented.

Your if statement will always go the "else" way.

if(false) {
     // unreachable code
}else {
}

just like

if(true) {
}else {
    // unreachable code
}

Change it to

 if(property == false) {...

or even better

if(!property) {...

or inline the condition and drop the if-else

$("#ts4").attr("checked", !property); 
$('#activate').click();