如何用JavaScript实现选中首个单选框全选复选框、第二个单选框取消全选

没问题，我帮你搞定这个需求！下面是完整的可运行实现方案，包含HTML结构和JavaScript逻辑，直接就能用：

HTML 结构 #

<!-- 单选控制按钮 -->
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br><br>

<!-- 示例复选框组 -->
<input type="checkbox" class="target-checkbox" /> 选项1<br>
<input type="checkbox" class="target-checkbox" /> 选项2<br>
<input type="checkbox" class="target-checkbox" /> 选项3<br>
<input type="checkbox" class="target-checkbox" /> 选项4<br>

JavaScript 逻辑 #

// 获取所有权限单选框和目标复选框
const permissionRadios = document.querySelectorAll('.permission');
const targetCheckboxes = document.querySelectorAll('.target-checkbox');

// 给每个单选框绑定change事件
permissionRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    // 根据选中的单选框值处理复选框状态
    if (this.value === 'select') {
      // 全选所有复选框
      targetCheckboxes.forEach(checkbox => checkbox.checked = true);
    } else if (this.value === 'deselect') {
      // 取消所有复选框选中
      targetCheckboxes.forEach(checkbox => checkbox.checked = false);
    }
  });
});

代码说明 #

• 首先通过document.querySelectorAll获取到所有需要监听的单选框，以及需要控制的复选框组
• 给每个单选框绑定change事件：当用户切换单选选项时，触发对应的处理逻辑
• 选中「Select All」时，遍历所有复选框，将它们的checked属性设为true，实现全选
• 选中「Deselect All」时，同理将所有复选框的checked设为false，实现批量取消选中

小提示：如果你的复选框用的不是target-checkbox这个类名，记得把代码里的类名改成你实际项目中用的哦！

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