本文介绍如何使用纯 javascript 精准控制指定 name 属性（如 email_notification）的一组复选框，实现页面加载时自动全选，或通过按钮动态切换全选/取消全选状态，避免误操作其他字段的复选框。
本文介绍如何使用纯 javascript 精准控制指定 name 属性（如 email_notification）的一组复选框，实现页面加载时自动全选，或通过按钮动态切换全选/取消全选状态，避免误操作其他字段的复选框。
在实际表单开发中，常需对同一逻辑分组（如 name="email_notification"）的多个复选框进行批量操作。原代码 document.querySelectorAll('input[type="checkbox"]') 会匹配页面所有复选框，缺乏针对性。正确做法是基于 name 属性精准定位目标组。
✅ 正确选择器：按 name 属性筛选
使用 document.querySelectorAll('input[name="email_notification"]') 即可精确获取该字段下的全部复选框元素，无论数量增减（如未来扩展至10个），均无需修改选择器。
? 示例：页面加载时自动全选
// 页面加载完成后执行（推荐放在 DOMContentLoaded 事件中）
document.addEventListener('DOMContentLoaded', function() {
const emailCheckboxes = document.querySelectorAll('input[name="email_notification"]');
emailCheckboxes.forEach(checkbox => {
checkbox.checked = true;
});
});
⚙️ 进阶功能：带状态切换的“全选/取消全选”按钮
以下代码提供更实用的交互方案——点击按钮切换当前组的全选状态，并自动更新按钮文案：
<!-- 复选框组 --><script> const checkboxes = document.querySelectorAll('input[name="email_notification"]'); const toggleBtn = document.getElementById('toggleEmailCheckboxes'); toggleBtn.addEventListener('click', function() { const allChecked = Array.from(checkboxes).every(cb => cb.checked); checkboxes.forEach(cb => cb.checked = !allChecked); // 动态更新按钮文本 toggleBtn.textContent = allChecked ? '全选' : '取消全选'; }); </script>
⚠️ 注意事项
- name 属性必须一致：确保所有目标复选框的 name="email_notification" 完全相同（包括大小写和空格）；
- 避免 ID 冲突：若使用 getElementById，请勿将 name 与 id 混淆；querySelectorAll 依赖 name 属性，与 ID 无关；
- 兼容性：querySelectorAll 和 forEach 在现代浏览器中完全支持（IE9+），如需兼容 IE8，可用 for 循环替代 forEach；
- 表单提交行为：未勾选的同名复选框不会提交任何值，只有 checked 为 true 的项才会作为键值对发送（如 email_notification=daily&email_notification=urgent）。
通过精准选择器 + 语义化逻辑，即可安全、可维护地管理任意复选框组，大幅提升表单交互体验与代码健壮性。
