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

我希望能够以编程方式切换切换开关吗？我从数据库中获取了一个值

Answer 1

两件事：

1）javascript中的语法，你没有关闭＆＃34;如果＆＃34;括号。 2）你没有在JSFiddle中检查jQuery的使用。没有它，它就不会工作。那个工作的例子：

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

https://jsfiddle.net/a99dkxp1/4/

Answer 2

您应该使用prop()而不是attr()，因为attr只设置具有给定值的属性而没有任何“intellingence”，而checked是一个标记属性，这不需要有价值。 prop()已实施此类“情报”。

Answer 3

你的if语句将永远是＆＃34; else＆＃34;方式。

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

就像

一样

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

将其更改为

 if(property == false) {...

甚至更好

if(!property) {...

或内联条件并删除if-else

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

如何使用JavaScript更改切换开关

3 个答案: