Warum bleiben meine Kontrollkästchen immer noch hängen und können nicht auf ihre Standardwerte zurückgesetzt werden?

Question

Ich habe gerade diese Funktion erstellt, um den Seitentitel nach dem Klicken auf die Umschalttaste zu ändern, aber aus irgendeinem Grund bleibt sie nach dem Klicken hängen. Ich bin mir nicht sicher, was an dieser Funktion falsch ist. Ich habe sie in Jquery geschrieben, aber sie macht dasselbe, selbst wenn sie in reinem JavaScript codiert ist. Dies ist in 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>

Hier ist ein Link zur Funktion in JSPlayground, aber auch das funktioniert nicht.

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