为什么我的复选框仍然卡住并且无法恢复为默认值？

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