如何使用JavaScript更改切换开关

Question

我已经用CSS和HTML设计了一个切换开关，但我想用JavaScript来切换/更改这个开关。

请问应该如何操作？你可以在jsfiddle链接中查看代码。

<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>

我的Javascript代码有问题，但它并没有起作用

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

我希望能够通过程序在从数据库获取到的值时切换开关按钮。

- DaviesTobi alex

---

你的JavaScript代码有语法错误。if语句中的括号未关闭。 - ElChupacabra

对我来说运行良好，请再检查一遍。 - bhansa

不太清楚问题所在——您发布的那个代码演示可以正常工作... - Stuart

只有 } 是错误的，你刚刚编辑了它，现在没有错误了。 - Durga

Answer 1

两件事情：

1）在javascript中的语法错误，你没有关闭“if”括号。 2）你没有检查JSFiddle中jQuery的使用。如果没有jQuery，它将无法工作。以下是一个可用的示例：

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/

- ElChupacabra

---

它现在在你的 jsfiddle 示例和我的示例中能够运行，但是在我的实际服务器上却无法正常工作。 - DaviesTobi alex

确保你包含了jQuery库。你还应该在document.ready()中运行你的代码，以等待所有脚本加载完毕。在浏览器中检查控制台并查看错误信息。 - ElChupacabra

@ElChupacabra 小笔误 - 应该是 switch ON。另外，作为一个旁注（我猜这更多是个“品味”问题），你应该使用 if (true) 来提高可读性。无论如何，点赞 +1。 - adhg

Answer 2

你应该使用prop()而不是attr()，因为attr()仅设置具有给定值的属性，没有任何"智能"，而checked是一个标记属性，根本不需要具有值。prop()已经实现了这样的"智能"。

- Glia

Answer 3

你的 if 语句总是会执行 "else" 分支。

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

就像这样

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

将其更改为

 if(property == false) {...

或者更好的是

if(!property) {...

或者内联条件并且删除if-else

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

- limotow