为什么我的复选框仍然卡住并且无法恢复为默认值?
P粉288069045
P粉288069045 2024-04-04 00:14:23
0
1
546

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

全部回复(1)
P粉588152636
  • 使用 ===== 来比较值。 = 用于赋值。由于 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";
  }
};

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板