如何用JS仅勾选指定字段email_notification下的所有复选框？

问题出在你原来的代码选中了页面上所有复选框，我们只需要缩小选择范围，只针对email_notification字段下的复选框即可，下面提供两种最常见的修改方式：

方式一：通过字段容器的ID定位（推荐） #

如果email_notification是包含所有目标复选框的容器（比如<div>、<fieldset>）的ID，修改代码如下：

// 仅选中id为email_notification的容器内的所有复选框
var checkboxes = document.querySelectorAll('#email_notification input[type="checkbox"]');
checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
});

选择器#email_notification input[type="checkbox"]的意思是：先找到ID为email_notification的元素，再选中它内部所有的复选框，这样就不会影响页面其他字段的复选框了。

方式二：通过复选框的name属性定位 #

如果每个目标复选框的name属性是email_notification（或者email_notification[]，数组形式的name），可以直接通过name筛选：

// 选中所有name为email_notification的复选框
var checkboxes = document.querySelectorAll('input[type="checkbox"][name="email_notification"]');
// 若复选框name是数组格式（如email_notification[]），则用下面的选择器：
// var checkboxes = document.querySelectorAll('input[type="checkbox"][name="email_notification[]"]');
checkboxes.forEach(function(checkbox) {
    checkbox.checked = true;
});

如何确认用哪种方式？ #

右键点击email_notification字段下的任意一个复选框，选择「检查」打开开发者工具：

• 查看这个复选框的父元素（往上找几层）有没有id="email_notification"的属性，有的话用方式一；
• 或者直接看复选框自身的name属性值是什么，对应使用方式二的选择器。

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