How to change toggle switch with JavaScript

Question

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

You have syntax error in javascript. Brackets for if are not closed. — ElChupacabra
– ElChupacabra, Commented Sep 21, 2017 at 11:04
Only } were wrong in that, and you just edited, then there is no error left. — Durga
– Durga, Commented Sep 21, 2017 at 11:07

adhg · Accepted Answer · 2020-06-03 23:45:43Z

2

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.net/a99dkxp1/4/

edited Jun 3, 2020 at 23:45

adhg

11k13 gold badges63 silver badges99 bronze badges

answered Sep 21, 2017 at 11:07

ElChupacabra

1,09112 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DaviesTobi alex Over a year ago

It works now with your jsfiddle example and mine now but on my live server its not working.

ElChupacabra Over a year ago

Make sure you are including jQuery. You should also run your code in document.ready() to wait until all scripts are loaded. Check console in browser and see what's the error.

adhg Over a year ago

@ElChupacabra small typo - switch ON. Also, as a side note (and I guess this is more of a 'taste' issue) you should ask if (true) for readability. Anyway +1

Glia · Accepted Answer · 2017-09-21 11:13:16Z

1

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.

answered Sep 21, 2017 at 11:13

Glia

3813 silver badges9 bronze badges

Comments

limotow · Accepted Answer · 2017-09-21 17:07:29Z

0

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();

answered Sep 21, 2017 at 17:07

limotow

113 bronze badges

Collectives™ on Stack Overflow

How to change toggle switch with JavaScript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related