如何使用原生JS动态获取元素数组中被点击元素的value值

问题原因 #

你代码失效的核心原因是用var声明了循环变量i：var不存在块级作用域，所有checkbox的点击事件回调会共享同一个i变量，等循环结束、触发点击事件时，i的值已经变成了3，超出了checkbox数组的下标范围，自然拿不到对应元素。

修复方案 #

最简单的修复方式是直接通过事件对象获取当前点击的元素，完全不依赖循环变量：

document.addEventListener("DOMContentLoaded", function() {
  var checkboxes = document.getElementsByClassName('checkbox');
  var listType = document.getElementById('ListType');
  var spanType = document.getElementById("type");
  // 存储所有可选类型，用于清除旧样式
  var allTypeClass = ['basiclist', 'accordionlist', 'internalonly'];

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].addEventListener('click', function(e) {
      // e.target就是当前被点击的checkbox元素
      var currentChecked = e.target;
      var currentValue = currentChecked.value;

      // 先清除之前加的所有类型样式，避免样式冲突
      allTypeClass.forEach(type => listType.classList.remove(type));
      // 仅在checkbox被选中时赋值，取消选中时清空内容
      if(currentChecked.checked) {
        listType.classList.add(currentValue);
        spanType.innerText = currentValue;
      } else {
        spanType.innerText = '';
      }
    });
  }
});

如果你只想让原逻辑里的checkbox[i]生效，不需要改其他代码，只需把循环声明for (var i = 0; i < checkboxes.length; i++)里的var改成let即可：let有块级作用域，每次循环都会生成独立的i副本，回调里就能拿到对应下标的元素。

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