如何使用原生JavaScript获取指定div下的复选框组

要取消id为bike1的div下所有复选框的选中状态，你可以按以下步骤操作：

问题分析 #

你之前的代码存在两个关键问题：

1. 选择器错误：你使用了类选择器.bike1，但目标元素的id是bike1，应该用id选择器#bike1。
2. 逻辑冗余：querySelector仅返回第一个匹配的input元素，后续调用closest('div')是向上查找父级div，完全偏离了获取所有复选框的目标。

正确实现代码 #

方法一：分步实现（可读性更高）

// 获取id为bike1的div元素
const bikeContainer = document.getElementById('bike1');
// 在该div下获取所有复选框
const checkboxGroup = bikeContainer.querySelectorAll('input[type="checkbox"]');
// 遍历每个复选框，取消选中状态
checkboxGroup.forEach(checkbox => {
  checkbox.checked = false;
});

方法二：链式写法（更简洁）

document.querySelectorAll('#bike1 input[type="checkbox"]').forEach(checkbox => {
  checkbox.checked = false;
});

代码说明 #

• document.getElementById('bike1')：精准获取目标div元素，性能略优于querySelector('#bike1')。
• querySelectorAll('input[type="checkbox"]')：在目标div范围内获取所有复选框，返回的NodeList可直接用forEach遍历。
• 遍历过程中设置checkbox.checked = false：直接修改复选框的选中状态。

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