如何优化单选按钮取值JS代码 消除重复冗余逻辑

当然有，核心思路就是把硬编码在if分支里的配置抽离，把重复的DOM操作合并，改完之后不仅没有重复代码，后续改价格、加套餐都方便很多。

原有代码的冗余问题 #

• 初始加载赋值和选中周套餐的赋值逻辑完全重复，写了两遍一模一样的DOM写入操作
• 三个if分支逻辑完全同构，只是写入的数值不同，属于典型的重复代码
• 三个独立if没有加else if或者终止逻辑，每次点击就算命中第一个分支，也会跑完后面两个无意义的判断
• 每个分支都单独写三次DOM赋值，代码非常啰嗦

优化后完整实现 #

JavaScript代码 #

// 一次性拿到所有要更新的结果节点，存为数组
const resultEls = Array.from(document.querySelectorAll('.table tr:nth-child(2) span'));

// 套餐配置表，索引和radio的value一一对应，改数值直接调整这里即可
const planMap = [
  ['50 %', '100 $', '150 $'],   // 周套餐 对应value=0
  ['150 %', '200 $', '350 $'],  // 月套餐 对应value=1
  ['250 %', '300 $', '450 $']   // 年套餐 对应value=2
];

// 抽离统一渲染函数，初始加载和切换套餐时复用
function updatePlan(planIndex) {
  resultEls.forEach((el, i) => {
    el.textContent = planMap[planIndex][i];
  });
}

// 初始化渲染默认选中的周套餐
updatePlan(0);

// 绑定切换事件
document.querySelector('div.btn-group').addEventListener('click', e => {
  if (e.target.type === 'radio') {
    // 直接拿radio的value当索引查配置，不需要任何if判断
    updatePlan(Number(e.target.value));
  }
});

这里把获取结果节点的方式改成了通过CSS选择器从表格里批量获取，连原来硬写的三个getElementById都省了，后续加套餐列只要同步改planMap里的数组就行，不用调整节点获取逻辑。如果你不想改DOM获取逻辑，换回原来的三个getElementById拼成数组也完全可以。另外这里用textContent替代innerHTML，因为写入的都是纯文本，性能更好也更安全。

HTML部分 #

原有HTML不需要做任何修改就能直接运行上面的JS，连原本写死的checked默认选中状态都能完美兼容。

后续扩展提示 #

如果之后要加季度套餐、终身套餐这类新选项，你只需要做三件事：

• 在btn-group里加对应的radio选项，value按顺序递增即可
• 在表格里加对应的展示列
• 在planMap里加对应位置的数值数组
  全程不需要修改事件绑定和渲染的逻辑代码，维护成本比原来堆if分支的写法低很多。

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