如何使用纯JavaScript将所有选中的复选框存入数组？

咱们先来拆解你代码里的问题，再一步步给出可行的解决方案：

你的代码存在的核心问题 #

• 循环条件硬写了i<2，这只能检查前2个复选框，要是页面上.subject类的复选框数量变了，代码就会失效，应该用集合的length属性来控制循环范围：i < subject.length。
• 你提到返回[object HTMLCollection]，大概率是不小心输出了subject这个集合本身，而非最终收集的checkboxesChecked数组；至于显示[object Object]，是因为DOM元素本身是对象，直接转字符串就会呈现这个结果，你需要提取它的具体属性（比如value、id）来展示。

修复后的代码方案 #

方案1：基于getElementsByClassName的兼容写法 #

var subject = document.getElementsByClassName("subject");
var checkboxesChecked = [];

// 遍历所有匹配的复选框，而非硬编码数量
for (var i = 0; i < subject.length; i++) {
  if (subject[i].checked === true) {
    // 两种存储选择：存DOM元素对象，或者存它的value属性
    checkboxesChecked.push(subject[i]);
    // 若要存具体值，替换成：checkboxesChecked.push(subject[i].value);
  }
}

// 控制台测试输出
console.log(checkboxesChecked);
// 若要查看选中的value，可转成值数组
console.log(checkboxesChecked.map(item => item.value));

方案2：更简洁的现代写法（ES6+） #

如果你的浏览器支持ES6及以上，用querySelectorAll可以一步到位：

// 直接获取所有选中的复选框并转成数组
var checkboxesChecked = Array.from(document.querySelectorAll(".subject:checked"));

// 若只想存选中的value值：
var checkedValues = Array.from(document.querySelectorAll(".subject:checked"), item => item.value);

console.log(checkboxesChecked); // 存储DOM元素对象的数组
console.log(checkedValues); // 存储选中值的数组

方案3：用forEach遍历（NodeList原生支持） #

var checkboxesChecked = [];
document.querySelectorAll(".subject").forEach(checkbox => {
  if (checkbox.checked) {
    checkboxesChecked.push(checkbox);
    // 替换成 checkbox.value 可存储具体值
  }
});

解决[object Object]的显示问题 #

如果是在页面中展示选中内容，不能直接输出DOM对象，要提取它的属性：

// 示例：把选中的value值展示在页面上
var checkedValues = checkboxesChecked.map(item => item.value);
document.getElementById("result").textContent = "选中的选项值：" + checkedValues.join(", ");

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