在React中如何批量修改所有checkbox复选框的选中状态？

1. 循环条件逻辑错误：getElementsByClassName 返回的 HTMLCollection 集合索引从0开始，最大有效索引为 集合长度 - 1，原代码使用 i <= x.length 作为循环终止条件，当 i 等于 x.length 时，x[i] 取值为 undefined，对 undefined 访问 checked 属性就会触发对应的报错。
2. 收到的「不存在checked属性」的提示属于误判：只要是 type="checkbox" 的 <input> 元素，原生自带 checked 可读写属性，不存在属性缺失问题，报错本质是取值对象为undefined导致的。

基础修复（仅修改循环条件） #

var x = document.getElementsByClassName("checkbox");
for(let i=0; i < x.length; i++) {
  x[i].checked = false;
}

更稳妥的优化写法 #

getElementsByClassName 返回的是动态HTMLCollection，遍历过程中如果DOM结构发生变化会实时更新集合长度，可能出现意料之外的问题，推荐使用以下更稳妥的写法：

• 转静态数组后遍历

const checkboxes = Array.from(document.getElementsByClassName("checkbox"));
checkboxes.forEach(item => item.checked = false);

• 使用querySelectorAll直接获取静态NodeList

// 加类型筛选避免匹配到非复选框元素
document.querySelectorAll('input[type="checkbox"].checkbox').forEach(item => {
  item.checked = false;
});

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