如何使用 JavaScript 更改切换开关答案

【问题标题】：How to change toggle switch with JavaScript如何使用 JavaScript 更改切换开关
【发布时间】：2020-06-04 07:45:43
【问题描述】：

我设计了一个带有 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();
}

我希望何时能够以编程方式切换拨动开关？我从数据库中得到一个值

【问题讨论】：

您在 javascript 中有语法错误。 if 的括号没有闭合。
对我来说很好，再检查一次。
不清楚问题 - 您发布的小提琴作品...
只有}有错，你刚刚编辑，就没有错误了。

标签： javascript jquery html css

【解决方案1】：

两件事：

1) javascript 中的语法，您没有关闭“if”括号。 2) 你没有检查 JSFiddle 中 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/

【讨论】：

它现在可以与您的 jsfiddle 示例和我的示例一起使用，但在我的实时服务器上它无法正常工作。
确保包含 jQuery。您还应该在 document.ready() 中运行代码以等待所有脚本都加载完毕。检查浏览器中的控制台，看看是什么错误。
@ElChupacabra 小错字 - 打开。另外，作为旁注（我想这更像是一个“品味”问题），您应该询问是否（真）以提高可读性。无论如何+1

【解决方案2】：

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

【讨论】：

【解决方案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();

【讨论】：