如何使用querySelector获取NodeList中最后点击元素的索引？

先纠正你代码里的两个关键问题：

• document.querySelector(".rgbClass")只会返回第一个匹配的元素，要获取所有复选框的完整NodeList，必须用document.querySelectorAll(".rgbClass")
• NodeList本身没有index()方法，需要借助数组特性或遍历参数来获取元素索引

实现方案 #

1. 获取所有.rgbClass复选框的NodeList
2. 给每个复选框绑定点击事件监听
3. 在点击事件中记录当前元素的索引，存储到指定变量中

完整代码示例 #

<input name="colors[]" value="RED" type="checkbox" class="rgbClass">RED<br>
<input name="colors[]" value="GREEN" type="checkbox" class="rgbClass">GREEN<br>
<input name="colors[]" value="BLUE" type="checkbox" class="rgbClass">BLUE<br>

// 获取所有复选框的NodeList
const checkboxes = document.querySelectorAll(".rgbClass");
let lastClickedIndex;

// 遍历绑定点击事件，直接利用forEach的索引参数
checkboxes.forEach((checkbox, index) => {
  checkbox.addEventListener("click", () => {
    lastClickedIndex = index;
    // 测试用输出，可根据需求替换为业务逻辑
    console.log(lastClickedIndex);
  });
});

// 修正你原有的选中状态设置代码
checkboxes[1].checked = true; // 现在能正确选中GREEN复选框

另一种索引获取方式（不依赖forEach索引参数） #

如果需要通过元素本身反向查找索引，可以把NodeList转为数组后使用indexOf：

checkboxes.forEach(checkbox => {
  checkbox.addEventListener("click", () => {
    lastClickedIndex = Array.from(checkboxes).indexOf(checkbox);
    console.log(lastClickedIndex);
  });
});

以上代码实现后，点击RED返回0、点击GREEN返回1、点击BLUE返回2，完全匹配你的需求。

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