首页  >  问答  >  正文

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

我刚刚创建了此功能,以便在单击切换按钮后更改页面标题,但由于某种原因,单击后它会卡住。我不确定这个函数哪里出了问题,我用 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 中该函数的链接,但也不起作用。

P粉288069045P粉288069045216 天前464

全部回复(1)我来回复

  • P粉588152636

    P粉5881526362024-04-04 21:12:02

    • 使用 ===== 来比较值。 = 用于赋值。由于 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";
      }
    };

    回复
    0
  • 取消回复