如何点击按钮按指定名称选中或取消选中多个Checkbox复选框

通用函数方案 #

你现有代码的逻辑是固定操作name为Red的复选框，要灵活选中指定多个而非全部的复选框，可以封装通用的操作函数，不用为每个分组重复写选择、取消逻辑：

JS代码 #

/**
 * 批量选中/取消指定复选框
 * @param {Array<string>} targetNames 要操作的复选框name集合
 * @param {boolean} isSelect true为选中，false为取消选中
 */
function toggleCheckboxes(targetNames, isSelect) {
  targetNames.forEach(name => {
    document.getElementsByName(name).forEach(item => {
      if (item.type === 'checkbox') {
        item.checked = isSelect
      }
    })
  })
}

HTML示例 #

需要新增不同的选中规则时，只需要新增按钮、传入对应name数组即可：

<input type="checkbox" name="Red" value="Red">Red<br>
<input type="checkbox" name="Blue" value="Blue">Blue<br>
<input type="checkbox" name="Yellow" value="Yellow">Yellow<br>
<input type="checkbox" name="Orange" value="Orange">Orange<br>
<input type="checkbox" name="Pink" value="Pink">Pink<br>
<input type="checkbox" name="Voilet" value="Voilet">Voilet<br>
<p>
  <!-- 一键选中红、黄、粉三个复选框 -->
  <input type="button" onclick="toggleCheckboxes(['Red','Yellow','Pink'], true)" value="选中暖色">
  <!-- 一键取消选中红、黄、粉三个复选框 -->
  <input type="button" onclick="toggleCheckboxes(['Red','Yellow','Pink'], false)" value="取消选中暖色">
  <!-- 一键选中蓝、紫两个复选框 -->
  <input type="button" onclick="toggleCheckboxes(['Blue','Voilet'], true)" value="选中冷色">
</p>

自定义分组方案 #

如果复选框的分组是固定的，还可以通过自定义属性标记分组，后续新增同分组的复选框不需要修改按钮逻辑，只需要给新增的复选框加上对应分组属性即可：

改造后的复选框示例 #

<input type="checkbox" name="Red" value="Red" data-group="warm">Red<br>
<input type="checkbox" name="Blue" value="Blue" data-group="cool">Blue<br>
<input type="checkbox" name="Yellow" value="Yellow" data-group="warm">Yellow<br>
<input type="checkbox" name="Orange" value="Orange" data-group="warm">Orange<br>
<input type="checkbox" name="Pink" value="Pink" data-group="warm">Pink<br>
<input type="checkbox" name="Voilet" value="Voilet" data-group="cool">Voilet<br>

对应JS代码 #

/**
 * 按分组批量选中/取消复选框
 * @param {string} groupName 分组名
 * @param {boolean} isSelect true为选中，false为取消选中
 */
function toggleGroup(groupName, isSelect) {
  document.querySelectorAll(`input[type="checkbox"][data-group="${groupName}"]`).forEach(item => {
    item.checked = isSelect
  })
}

按钮示例 #

<p>
  <input type="button" onclick="toggleGroup('warm', true)" value="选中暖色">
  <input type="button" onclick="toggleGroup('warm', false)" value="取消选中暖色">
  <input type="button" onclick="toggleGroup('cool', true)" value="选中冷色">
</p>

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