JavaScript中处理复选框和单选框的核心是监听change事件并操作checked属性；change比click更准确可靠，适用于多选遍历、单选查询及编程设置状态，手动设置需主动触发change事件。
JavaScript 中处理复选框（checkbox）和单选框（radio）的选中状态，核心是监听 change 事件，并通过元素的 checked 属性读取或设置当前状态。
监听 change 事件而不是 click
change 事件在用户完成交互（如点击后焦点离开，或直接勾选/取消）时触发，语义更准确，兼容性更好。相比 click，它能避免因键盘操作（空格键切换）、程序设置等导致的状态与事件不一致问题。
- 对
<input type="checkbox">和<input type="radio">都适用 - 不要用
onclick替代，尤其在表单校验或状态同步场景下容易出错
获取复选框的选中状态
复选框支持多选，常需遍历或判断是否被勾选：
- 单个复选框：
checkbox.checked返回true或false - 多个同名复选框：用
document.querySelectorAll('input[name="hobbies"]:checked')获取所有已选中的节点列表 - 获取选中值数组：
[...document.querySelectorAll('input[name="hobbies"]:checked')].map(cb => cb.value)
获取单选框的选中值
单选框组（name 相同）中只有一个可被选中，推荐用 :checked 伪类配合 querySelector：
立即学习“Java免费学习笔记（深入）”；
const selected = document.querySelector('input[name="gender"]:checked');- 安全取值写法：
selected ? selected.value : null（避免未选时返回undefined） - 也可监听整个组的
change，事件目标就是当前被选中的那个元素
设置选中状态
通过赋值 checked = true/false 可以编程控制状态，注意这不会自动触发 change 事件：
document.getElementById('agree').checked = true;- 如需同步触发事件（例如更新 UI 或校验逻辑），手动调用：
elem.dispatchEvent(new Event('change', { bubbles: true })) - 设置前建议先检查是否已存在该状态，避免无谓重绘
