Vanilla JS中如何在forEach函数内获取选中input元素的ID？

你的代码失效的核心原因是箭头函数的this指向特性：箭头函数不会创建自己的this上下文，它会继承外层作用域的this（这里是自执行函数的this，严格模式下为undefined，非严格模式下为全局window对象），所以this.id根本取不到当前选中的input元素的ID。

给你两种直接的修正方案：

方案1：使用箭头函数+回调参数 #

直接用forEach回调的参数（该参数就是当前遍历到的选中input元素）来获取ID，这是最简洁的写法：

(function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach((checkVariant) => {
      console.log(checkVariant.id + " is checked")
    });
})();

方案2：使用普通函数+回调参数 #

如果你习惯用普通函数而非箭头函数，写法如下，效果完全一致：

(function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach(function(checkVariant) {
      console.log(checkVariant.id + " is checked")
    });
})();

本质上就是把jQuery each方法里的this替换成原生forEach回调的参数——因为原生forEach不会像jQuery那样自动把this绑定到当前元素上，直接用参数是最稳妥的写法。

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