如何使用 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();
}

我希望何時能夠以編程方式切換切換開關？ 我從數據庫中得到一個值

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

Answer 2

您應該使用prop()而不是attr() ，因為 attr 僅設置具有給定值的屬性而沒有任何“智能”並且checked是一個標記屬性，它根本不需要有值。 prop()實現了這樣的“智能”。

Answer 3

您的 if 語句將始終采用“其他”方式。

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

就像

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

將其更改為

 if(property == false) {...

甚至更好

if(!property) {...

或內聯條件並刪除 if-else

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