You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

JavaScript/jQuery实现:通过Checkbox控制Radio Button

当然可以!这里有两个常见场景的实现示例,你可以根据自己的需求调整:

场景1:用Checkbox控制Radio Button的启用/禁用

这个场景适合你想让用户通过勾选复选框来解锁一组单选按钮的情况。

<form>
  <!-- 控制用的Checkbox -->
  <label>
    <input type="checkbox" id="enableRadios"> 启用单选按钮组
  </label>

  <!-- 被控制的Radio Button组 -->
  <div class="radio-group" style="margin-top: 10px;">
    <label>
      <input type="radio" name="options" value="option1" disabled> 选项1
    </label>
    <label>
      <input type="radio" name="options" value="option2" disabled> 选项2
    </label>
    <label>
      <input type="radio" name="options" value="option3" disabled> 选项3
    </label>
  </div>
</form>
// 获取控制复选框和所有单选按钮
const enableCheckbox = document.getElementById('enableRadios');
const radioButtons = document.querySelectorAll('input[name="options"]');

// 给复选框添加变化事件监听
enableCheckbox.addEventListener('change', function() {
  // 根据复选框的状态,切换所有单选按钮的disabled属性
  radioButtons.forEach(radio => {
    radio.disabled = !this.checked;
    // 如果启用时想自动选中第一个单选按钮,可以加下面这行
    // if (this.checked && !radio.checked) radio.checked = true;
  });
});

说明:一开始单选按钮是禁用状态,当用户勾选复选框后,所有单选按钮就会变成可点击状态;取消勾选则重新禁用。如果需要启用时自动选中某个选项,只需要解开注释那行代码就行。

场景2:用Checkbox控制Radio Button的选中状态

这个场景适合你想让用户通过勾选复选框来直接选中某个特定的单选按钮(比如“默认选项”)。

<form>
  <!-- 控制用的Checkbox -->
  <label>
    <input type="checkbox" id="selectDefault"> 自动选中默认选项
  </label>

  <!-- 被控制的Radio Button组 -->
  <div class="radio-group" style="margin-top: 10px;">
    <label>
      <input type="radio" name="settings" value="default"> 默认设置
    </label>
    <label>
      <input type="radio" name="settings" value="custom"> 自定义设置
    </label>
  </div>
</form>
// 获取控制复选框和目标单选按钮
const selectCheckbox = document.getElementById('selectDefault');
const defaultRadio = document.querySelector('input[name="settings"][value="default"]');

// 复选框变化时的处理逻辑
selectCheckbox.addEventListener('change', function() {
  // 如果勾选,就选中默认单选按钮;取消勾选则调整选中项(单选按钮组至少会有一个选中)
  if (this.checked) {
    defaultRadio.checked = true;
  } else {
    // 如果需要取消勾选后让另一个选项选中,就加下面这行
    // document.querySelector('input[name="settings"][value="custom"]').checked = true;
  }
});

说明:勾选复选框时,“默认设置”单选按钮会被自动选中;如果取消勾选,你可以选择让另一个选项自动选中(解开注释),或者保持当前选中状态(因为单选按钮组不能没有选中项,除非做特殊处理)。


内容的提问来源于stack exchange,提问作者fightstarr20

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.19 03:58:08