获取选中Checkbox并生成Li元素失效，如何不使用value属性实时实现？

原代码的问题点 #

• 复选框获取方式错误：document.getElementsByTagName('input').type == 'checkbox' 返回的是布尔值，不是元素集合，根本没法遍历。
• 没有监听复选框的状态变化事件，无法实时响应勾选/取消操作。
• 创建元素逻辑冗余：每次勾选都重复创建div、ul，会导致结构混乱；而且新建空label并赋值给li，根本拿不到实际的选项文本。
• 没有处理取消勾选时的元素移除逻辑，只会不断添加新元素。

修正后的实现方案 #

首先确保HTML里存在目标容器.main-container-2（原代码里没写，需要补上），然后通过复选框的id关联对应的label来获取文本内容，监听change事件实时更新列表：

修正后的HTML

<div class="article-main">
  <div class="article-left">
      <div>
          <input type="checkbox" id="checkbox1">
          <label for="checkbox1">Onion</label>
      </div>
      <div>
          <input type="checkbox" id="checkbox2">
          <label for="checkbox2">Spring Onion</label>
      </div>
      <div>
          <input type="checkbox" id="checkbox3">
          <label for="checkbox3">Egg</label>
      </div>
   </div>
   <!-- 新增目标容器，用来展示生成的列表 -->
   <div class="main-container-2">
     <ul id="checked-list"></ul>
   </div>
</div>

修正后的JavaScript

// 获取所有复选框和固定的列表容器
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedList = document.getElementById('checked-list');

// 定义处理复选框状态变化的函数
function handleCheckboxChange(checkbox) {
  const label = document.querySelector(`label[for="${checkbox.id}"]`);
  const optionText = label.textContent.trim();

  if (checkbox.checked) {
    // 勾选时创建Li元素，给Li加个自定义属性关联复选框id，方便后续删除
    const li = document.createElement('li');
    li.dataset.checkboxId = checkbox.id;
    li.textContent = optionText;
    checkedList.appendChild(li);
  } else {
    // 取消勾选时找到对应的Li元素并删除
    const targetLi = checkedList.querySelector(`li[data-checkbox-id="${checkbox.id}"]`);
    if (targetLi) {
      checkedList.removeChild(targetLi);
    }
  }
}

// 给每个复选框绑定change事件
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => handleCheckboxChange(checkbox));
});

// 初始化：如果页面加载时已有勾选的复选框，先生成对应的Li
checkboxes.forEach(checkbox => {
  if (checkbox.checked) {
    handleCheckboxChange(checkbox);
  }
});

核心逻辑说明 #

1. 用document.querySelectorAll('input[type="checkbox"]')正确获取所有复选框元素。
2. 通过复选框的id，用document.querySelector(label[for="${checkbox.id}"])找到对应的标签，直接获取标签文本，完全不需要依赖input的value属性。
3. 监听复选框的change事件，实时响应勾选/取消操作：勾选时创建Li并添加到列表，取消时删除对应的Li。
4. 给Li元素添加自定义属性data-checkbox-id，关联对应的复选框id，确保取消勾选时能精准找到要删除的Li。

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