為什麼我的複選框仍然卡住並且無法恢復為預設值？

Question

我剛剛創建了此功能，以便在單擊切換按鈕後更改頁面標題，但由於某種原因，單擊後它會卡住。我不確定這個函數哪裡出了問題，我用 Jquery 編寫了它，但即使用純 JavaScript 編碼，它也會做同樣的事情。這是 Jquery 中的

function toggleButton() {
    console.log($('#toggle-employees').prop('checked'))
    if($('#toggle-employees').prop('checked', true)) {
        console.log("true");
        $("#bodyTitle").html("Employees");
    } else {
        console.log("false");
        $("#bodyTitle").html("Roles");
    };
};

<h1 id="bodyTitle" class="navbar-brand"></h1>

<div class="form-check form-switch hidden" id="employee-toggler">
    <input class="form-check-input" onclick="toggleButton()" type="checkbox" role="switch" id="toggle-employees">
    <label class="form-check-label" for="toggle-employees">Employees</label>
</div>

這裡是 JSPlayground 中該函數的鏈接，但也不起作用。

Answer 1

• 使用 == 或 === 來比較值。 = 用來賦值。由於 checked 屬性是一個布林值，因此可以直接使用 document.getElementById('toggle-employees').checked 作為條件來檢查是否為 true。
• checked 屬性變更時無需設定；這完全是多餘的。

function toggleButton() {
  var paragraph = document.getElementById("bodyTitle")
  console.log(document.getElementById('toggle-employees').checked)
  if (document.getElementById('toggle-employees').checked) {
    console.log("true");
    paragraph.innerHTML = "Employees";
  } else {
    console.log("false");
    paragraph.innerHTML = "Roles";
  }
};

  
  Employees