如何实现HTML表单中两组单选按钮的联动选中与默认配置（支持JS/JQuery方案）

阿华AIGC实验室

2026-4-30

问题解答

问题1：表单中的单选按钮能否用于选中同表单内的另一个单选按钮？

单选按钮本身没有原生的跨组选中能力——同name的单选组是互斥选中的，不同name的组默认完全独立。但通过JavaScript监听单选按钮的状态变化，我们可以手动控制另一组对应按钮的选中状态，完全能实现你要的联动效果。

问题2：两组单选按钮联动实现方案

你的需求完全可以实现，下面提供原生JS和jQuery两种解决方案，还包含默认选中设置和隐藏第二组按钮的方法：

先处理隐藏第二组（符合你的需求）

先加一段CSS把第二组的标签和按钮藏起来，避免用户误操作：

/* 隐藏第二组的所有元素 */
label[for="buyer"], label[for="agent"], #buyer, #agent {
  display: none;
}

原生JavaScript方案

// 等页面DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取两组的单选按钮元素
  const firstGroupBuyer = document.getElementById('buyer-select');
  const firstGroupAgent = document.getElementById('agent-select');
  const secondGroupBuyer = document.getElementById('buyer');
  const secondGroupAgent = document.getElementById('agent');

  // 初始化默认状态：确保页面加载时两组都选中Buyer
  firstGroupBuyer.checked = true;
  secondGroupBuyer.checked = true;

  // 定义同步函数
  function syncRadioGroups() {
    if (firstGroupBuyer.checked) {
      secondGroupBuyer.checked = true;
    } else if (firstGroupAgent.checked) {
      secondGroupAgent.checked = true;
    }
  }

  // 给第一组的两个按钮绑定change事件
  firstGroupBuyer.addEventListener('change', syncRadioGroups);
  firstGroupAgent.addEventListener('change', syncRadioGroups);
});

jQuery方案

如果你的项目已经引入了jQuery，写法会更简洁：

$(document).ready(function() {
  // 初始化默认选中状态
  $('#buyer-select').prop('checked', true);
  $('#buyer').prop('checked', true);

  // 监听第一组所有单选按钮的change事件
  $('input[name="answers[1234][answers]"]').on('change', function() {
    const selectedVal = $(this).val();
    // 根据选中值同步第二组
    if (selectedVal === 'buyer') {
      $('#buyer').prop('checked', true);
    } else if (selectedVal === 'broker') {
      $('#agent').prop('checked', true);
    }
  });
});