复选框点击后卡住无法恢复默认？Toggle按钮切换标题功能异常求助

核心问题 #

你的代码里存在一个关键错误：if($('#toggle-employees').prop('checked', true))这行是强制设置复选框为选中状态，而非获取它当前的选中状态。这会导致每次点击都把复选框锁死在选中状态，自然无法切换，标题也只会一直显示"Employees"。

修复后的jQuery实现 #

function toggleButton() {
    // 改为获取当前checked状态，而非设置
    const isChecked = $('#toggle-employees').prop('checked');
    console.log(isChecked);
    if(isChecked) {
        console.log("true");
        $("#bodyTitle").html("Employees");
    } else {
        console.log("false");
        $("#bodyTitle").html("Roles");
    }
};

// 初始化默认标题
$(document).ready(function() {
    $("#bodyTitle").html("Roles");
});

对应的HTML：

<h1 id="bodyTitle" class="navbar-brand"></h1>

<div class="form-check form-switch" 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>

纯JavaScript实现方案 #

如果用纯JS，同样要注意是获取checked属性而非设置：

function toggleButton() {
    const checkbox = document.getElementById('toggle-employees');
    const title = document.getElementById('bodyTitle');
    console.log(checkbox.checked);
    if(checkbox.checked) {
        title.textContent = "Employees";
    } else {
        title.textContent = "Roles";
    }
}

// 初始化默认标题
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('bodyTitle').textContent = "Roles";
});

额外优化建议 #

• 避免内联onclick，用事件监听绑定更易维护：
  jQuery版本：

  $(document).ready(function() {
      $("#bodyTitle").html("Roles");
      $('#toggle-employees').on('click', function() {
          if($(this).prop('checked')) {
              $("#bodyTitle").html("Employees");
          } else {
              $("#bodyTitle").html("Roles");
          }
      });
  });
  

  此时HTML里的onclick="toggleButton()"可以直接删除。

内容的提问来源于stack exchange，提问作者JayPee