Mengapakah kotak pilihan saya masih tersekat dan tidak dapat kembali kepada nilai lalainya?

Question

Saya baru sahaja mencipta fungsi ini untuk menukar tajuk halaman selepas mengklik butang togol, tetapi atas sebab tertentu ia tersekat selepas mengklik. Saya tidak pasti apa yang salah dengan fungsi ini, saya menulisnya dalam Jquery tetapi ia melakukan perkara yang sama walaupun dikodkan dalam JavaScript tulen. Ini ada dalam 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>

Berikut ialah pautan ke fungsi dalam JSPlayground, tetapi itu juga tidak berfungsi.

Answer 1

• Gunakan == 或 === 来比较值。 = 用于赋值。由于 checked 属性是一个布尔值，因此可以直接使用 document.getElementById('toggle-employees').checked 作为条件来检查是否为 true.
• checked Tidak perlu menetapkan harta apabila ia berubah sepenuhnya;

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