Pourquoi mes cases à cocher sont-elles toujours bloquées et ne parviennent-elles pas à revenir à leurs valeurs par défaut ?

Question

Je viens de créer cette fonction pour changer le titre de la page après avoir cliqué sur le bouton bascule, mais pour une raison quelconque, elle reste bloquée après avoir cliqué. Je ne suis pas sûr de ce qui ne va pas avec cette fonction, je l'ai écrite en Jquery mais elle fait la même chose même lorsqu'elle est codée en JavaScript pur. C'est en 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>

Voici un lien vers la fonction dans JSPlayground, mais cela ne fonctionne pas non plus.

Answer 1

• Utilisez == 或 === 来比较值。 = 用于赋值。由于 checked 属性是一个布尔值，因此可以直接使用 document.getElementById('toggle-employees').checked 作为条件来检查是否为 true.
• checked Il n'est pas nécessaire de définir la propriété lorsqu'elle change ; elle est complètement redondante.

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