复选框change事件无法返回value值问题求助

核心问题 #

你用cbs.innerHTML +=拼接HTML的方式会导致每次拼接时，cbs容器内的所有元素都会被重新渲染一遍——之前绑定的事件监听会全部失效。循环里刚给元素绑完事件，下一次innerHTML +=就会把之前的元素重新创建，事件自然就没了。

方案1：事件委托（推荐） #

不用给每个复选框单独绑事件，直接给父容器cboxes绑定事件，利用事件冒泡处理子元素的change事件，后续新增元素也能生效。

HTML代码

<div id="cboxes"></div>

JavaScript代码

let res = [
  { id: "123", fullName: "harry potter", username: "harrypotter" },
  { id: "345", fullName: "hermione granger", username: "hermionegranger" },
  { id: "678", fullName: "ron weasley", username: "ronweasley" },
  { id: "789", fullName: "ginny weasley", username: "ginnyweasley" },
  { id: "987", fullName: "luna lovegood", username: "lunalovegood" },
];

let cbs = document.getElementById("cboxes");
// 一次性拼接所有HTML，避免多次重新渲染容器
let htmlContent = '';
for (const cb of res) {
  htmlContent += `<div class="form-check form-check-inline">
    <input type="checkbox" class="form-check-input" id="${cb.username}" name="${cb.username}" value="${cb.id}">
    <label class="form-check-label" for="${cb.username}">${cb.username}</label>
  </div>`;
}
cbs.innerHTML = htmlContent;

// 给父容器绑定事件委托
cbs.addEventListener('change', function(event) {
  // 确认触发事件的是目标复选框
  if (event.target.classList.contains('form-check-input')) {
    if (event.target.checked) {
      alert(`checked ${event.target.value}`);
    } else {
      alert("not checked");
    }
  }
});

方案2：用DOM API创建元素 #

直接通过createElement创建每个元素节点，再添加到容器里，这样每个元素都是独立创建的，绑定的事件不会丢失。

HTML代码

<div id="cboxes"></div>

JavaScript代码

let res = [
  { id: "123", fullName: "harry potter", username: "harrypotter" },
  { id: "345", fullName: "hermione granger", username: "hermionegranger" },
  { id: "678", fullName: "ron weasley", username: "ronweasley" },
  { id: "789", fullName: "ginny weasley", username: "ginnyweasley" },
  { id: "987", fullName: "luna lovegood", username: "lunalovegood" },
];

let cbs = document.getElementById("cboxes");
for (const cb of res) {
  // 创建外层div
  const wrapDiv = document.createElement('div');
  wrapDiv.className = 'form-check form-check-inline';
  
  // 创建复选框
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.className = 'form-check-input';
  checkbox.id = cb.username;
  checkbox.name = cb.username;
  checkbox.value = cb.id;
  
  // 创建标签
  const label = document.createElement('label');
  label.className = 'form-check-label';
  label.setAttribute('for', cb.username);
  label.textContent = cb.username;
  
  // 绑定change事件
  checkbox.addEventListener('change', function(event) {
    if (event.currentTarget.checked) {
      alert(`checked ${this.value}`);
    } else {
      alert("not checked");
    }
  });
  
  // 组装并添加到容器
  wrapDiv.appendChild(checkbox);
  wrapDiv.appendChild(label);
  cbs.appendChild(wrapDiv);
}

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