如何用原生JavaScript实现动态生成的多个toggle开关独立控制

问题根源 #

1. 所有复选框复用了相同的id="switch"，label的for属性也都指向同一个id，浏览器默认点击label时会触发对应id的输入框，因此所有label点击都会触发第一个复选框。
2. JS中用document.querySelector(".toggle-checkbox")只会返回页面内第一个匹配的元素，无论点击哪个开关，读取的都是第一个开关的状态。

解决方案 #

1. Django动态生成唯一ID

渲染列表时直接用每行数据的主键ID生成唯一标识即可，假设你循环的列表是items，每个元素有主键id，Django模板写法如下：

{% for item in items %}
<div class="idm-switch_div div-container">
  <input type="checkbox" id="switch_{{ item.id }}" class="toggle-checkbox" />
  <label for="switch_{{ item.id }}" class="toggle"> </label>
</div>
{% endfor %}

如果没有可用的主键，也可以用循环自带的计数器生成唯一值：id="switch_{{ forloop.counter }}"。

2. 修改JS逻辑，获取当前点击开关对应的复选框

绑定点击事件的label和对应的复选框是同级相邻元素，直接通过元素关系获取即可，不需要全局查询，修改后的代码如下：

const myswitch = document.querySelectorAll(".idm-switch_div .toggle");
myswitch.forEach((element) => {
  element.addEventListener("click", function () {
    // 获取当前label对应的复选框元素
    const currentCheckbox = this.previousElementSibling;
    const isChecked = currentCheckbox.checked;
    // 存储状态时用唯一key区分不同开关
    localStorage.setItem(`checkstate_${currentCheckbox.id}`, !isChecked);
    console.log(`开关${currentCheckbox.id}状态：`, !isChecked);
  });
});

3. 可选：CSS去重

当前CSS中开关选中样式、隐藏复选框的代码重复写了两遍，删除重复部分即可，不影响功能运行。

批量获取所有开关状态方法 #

如果需要一次性读取所有开关的状态，可使用如下方法：

function getAllSwitchStatus() {
  const status = [];
  document.querySelectorAll(".toggle-checkbox").forEach(checkbox => {
    status.push({
      switchId: checkbox.id,
      isChecked: checkbox.checked
    })
  })
  return status;
}

// 调用示例
console.log(getAllSwitchStatus())

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