如何通过DOM操作根据后端返回值设置toggle开关的初始状态

可以通过DOM操作实现，你的思路方向正确，仅需要修正几个细节问题即可。

现有写法的问题 #

• 你选中的是id为toggleButton的<label>元素，实际控制选中状态的是它内部的<input type="checkbox">元素，checked属性需要绑定在复选框元素上
• attr()是jQuery提供的方法，原生JavaScript不支持该写法

实现方案 #

方案1：给复选框单独加id（推荐，选择逻辑更清晰） #

首先修改你的Pug代码，给input元素新增id：

p Hours Button
  label.switch
    input#toggleCheckbox(type='checkbox' onchange='function1(this)')
    span.slider.round 

然后编写页面加载后的状态设置逻辑，需要确保DOM加载完成后再执行操作：

// 监听DOM加载完成事件
document.addEventListener('DOMContentLoaded', async function() {
  // 1. 从后端获取状态值，此处为示例逻辑，替换为你的实际接口请求
  const apiResponse = await fetch('/你的后端接口路径')
  const result = await apiResponse.json()
  // 假设后端返回的选中状态字段为isHoursOpen，布尔类型
  const initCheckedStatus = result.isHoursOpen

  // 2. 选中复选框元素，设置初始状态
  const toggleEl = document.getElementById('toggleCheckbox')
  toggleEl.checked = initCheckedStatus

  // 若需要初始状态设置后同步执行function1的逻辑，可主动调用下方代码
  // function1(toggleEl)
})

方案2：不修改原有Pug代码 #

如果你不想调整现有Pug结构，可以通过父级label选择内部的复选框元素：

// 其他逻辑和方案1一致，仅修改元素选择逻辑
const toggleEl = document.querySelector('#toggleButton input[type="checkbox"]')
toggleEl.checked = initCheckedStatus

其他可选实现 #

如果你的项目引入了jQuery，也可以用你原本思路的jQuery写法实现：

$(document).ready(function() {
  // 后端请求逻辑省略
  $('#toggleButton input[type="checkbox"]').prop('checked', initCheckedStatus)
})

注意jQuery中修改表单选中状态要用prop()方法，不要用attr()，避免出现属性和属性值不同步的问题。

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