JavaScript添加HTML元素问题：复选框触发Chip组件失效排查

你的代码存在几个关键问题，导致Chip组件无法正常生效：

1. 自定义ID生成逻辑错误 #

循环中customid = customid + FilterDropdownsElem[i].id + i会让ID不断叠加（比如第一个复选框ID是id0，第二个就变成id0id11），这会导致后续无法正确定位元素。应该每次循环生成独立的唯一ID：

// 替换原累加逻辑，生成独立ID
const customid = `${FilterDropdownsElem[i].id}-${i}`;

2. 获取元素时误用字符串字面量 #

document.getElementById('customid')里的'customid'是固定字符串，不是你定义的变量，所以永远找不到目标元素。需要直接使用变量：

// 错误写法
document.getElementById('customid')
// 正确写法
document.getElementById(customid)

3. 循环变量i的作用域陷阱 #

事件监听器是异步触发的，当点击事件发生时，循环已经结束，i会变成循环的最终值，导致FilterDropdownsElem[i]指向错误的复选框。可以改用this（绑定当前复选框）或事件对象target来获取当前触发元素：

// 事件处理函数中替换FilterDropdownsElem[i]为this
if (this.checked) {
  document.getElementById(customid).style.display = "block";
} else {
  document.getElementById(customid).style.display = "none";
}

4. 重复创建DOM元素 #

每次点击都会通过innerHTML +=添加新元素，导致同一个Chip被多次创建。建议初始化时就创建好所有Chip，仅控制显示隐藏状态。

修复后的完整代码 #

const ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer');
const FilterDropdownsElems = document.querySelector('.FilterDropdowns');
const FilterDropdownsElem = FilterDropdownsElems.querySelectorAll('[type=checkbox]');

for (let i = 0; i < FilterDropdownsElem.length; i++) {
  const customid = `${FilterDropdownsElem[i].id}-${i}`;
  // 提前创建所有Chip元素，默认隐藏
  const chipHtml = `
    <div class="col-md-auto" id="${customid}" style="display:none;">
      <div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">
        ${FilterDropdownsElem[i].id} <i class="close fas fa-times" style="font-size: small;"></i>
      </div>
    </div>
  `;
  ChoosenFiltercontainer.innerHTML += chipHtml;

  // 绑定当前复选框到事件函数，避免作用域问题
  FilterDropdownsElem[i].addEventListener('click', function(customid) {
    const chipElement = document.getElementById(customid);
    chipElement.style.display = this.checked ? "block" : "none";
  }.bind(FilterDropdownsElem[i], customid));
}

更简洁的forEach版本 #

用forEach循环可以彻底避免循环变量的作用域问题：

const ChoosenFiltercontainer = document.getElementById('ChoosenFiltercontainer');
const FilterDropdownsElems = document.querySelector('.FilterDropdowns');
const FilterDropdownsElem = FilterDropdownsElems.querySelectorAll('[type=checkbox]');

FilterDropdownsElem.forEach((checkbox, index) => {
  const customid = `${checkbox.id}-${index}`;
  const chipHtml = `
    <div class="col-md-auto" id="${customid}" style="display:none;">
      <div class="chip chip-outline btn-outline-dark rounded-pill" data-mdb-ripple-color="dark">
        ${checkbox.id} <i class="close fas fa-times" style="font-size: small;"></i>
      </div>
    </div>
  `;
  ChoosenFiltercontainer.innerHTML += chipHtml;

  checkbox.addEventListener('click', () => {
    const chipElement = document.getElementById(customid);
    chipElement.style.display = checkbox.checked ? "block" : "none";
  });
});

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