单选按钮选中时如何调用对应JS代码实现不同频段计算逻辑

针对你需要根据选中的KU频段单选按钮调用不同计算逻辑的需求，以下是两种可直接落地的实现方式，同时解答你关于函数存储的疑问：

1. 前置HTML结构示例 #

首先确保你的单选按钮name属性一致，实现互斥选中效果，同时给每个按钮设置唯一value用于区分频段类型：

<!-- KU频段选择 -->
<label>
  <input type="radio" name="ku-band-type" value="type1" checked>
  KU频段1
</label>
<label>
  <input type="radio" name="ku-band-type" value="type2">
  KU频段2
</label>

2. 基础实现（仅2个频段场景） #

无需额外定义数组或映射对象，直接通过判断选中状态调用对应函数即可，适合逻辑固定的场景：

// 第一类KU频段转换逻辑
function calcKuBand1(rfValue) {
  // 替换为你的实际转换公式
  return rfValue - 10600;
}

// 第二类KU频段转换逻辑
function calcKuBand2(rfValue) {
  // 替换为你的实际转换公式
  return rfValue - 11300;
}

// 绑定单选按钮事件
const kuRadios = document.querySelectorAll('input[name="ku-band-type"]');
kuRadios.forEach(radio => {
  // 监听change事件，支持鼠标点击、键盘操作选中两种场景
  radio.addEventListener('change', () => {
    // 仅对当前选中的单选按钮执行逻辑
    if (radio.checked) {
      // 替换为实际获取用户输入RF值的逻辑
      const inputRf = Number(document.querySelector('#rf-input').value);
      let calcResult;
      // 根据选中的value调用对应函数
      if (radio.value === 'type1') {
        calcResult = calcKuBand1(inputRf);
      } else {
        calcResult = calcKuBand2(inputRf);
      }
      // 替换为实际将结果渲染到页面的逻辑
      document.querySelector('#l-band-result').textContent = calcResult;
    }
  })
})

3. 易扩展实现（推荐） #

针对你提到的是否需要用数组存函数的疑问：不需要用数组，使用函数映射对象更易维护，后续新增频段只需要加对应配置，不需要修改事件监听逻辑：

// 函数映射对象：key对应单选按钮的value，value为对应频段的转换函数
const kuBandCalcMap = {
  type1: (rfValue) => rfValue - 10600, // 第一类KU频段逻辑
  type2: (rfValue) => rfValue - 11300, // 第二类KU频段逻辑
  // 后续新增第三类KU频段时，只需要在这里加一行配置即可
}

const kuRadios = document.querySelectorAll('input[name="ku-band-type"]');
kuRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      const inputRf = Number(document.querySelector('#rf-input').value);
      // 直接通过选中的value匹配对应的转换函数，无需分支判断
      const calcResult = kuBandCalcMap[radio.value](inputRf);
      document.querySelector('#l-band-result').textContent = calcResult;
    }
  })
})

注意事项 #

• 单选按钮的name属性必须完全一致，才能实现互斥选中效果
• 推荐监听change事件而非click事件，避免键盘操作选中单选按钮时不触发逻辑
• 可以在页面初始化时主动获取当前默认checked的单选按钮，执行一次对应逻辑，避免初始状态无计算结果

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