如何重构重复代码？按钮点击选中对应单选框的代码优化方法

你可以通过以下两种方式将重复的函数合并为单个通用函数：

方法一：传递数字参数（适配现有ID命名） #

先修改按钮的onclick绑定，把对应单选框的后缀数字作为参数传入：

onclick="radioChecked(1)"
onclick="radioChecked(2)"
onclick="radioChecked(3)"

然后编写单个通用函数，动态拼接ID选择器：

function radioChecked(packageNum) {
  const packageRadio = document.querySelector(`#package${packageNum}`);
  // 直接赋值checked属性为true，比setAttribute更可靠
  packageRadio.checked = true;
}

说明：这种方式利用参数动态生成目标元素的ID，彻底复用了相同的逻辑。另外，单选框的checked是布尔类型属性，直接赋值true比使用setAttribute更符合DOM操作规范，能确保状态正确更新。

方法二：使用data属性（更灵活的扩展方案） #

如果不想依赖ID的数字后缀，或者之后可能修改ID命名，可以给按钮添加data-target属性指定目标单选框：

<button onclick="radioChecked(this)" data-target="#package1">选择套餐1</button>
<button onclick="radioChecked(this)" data-target="#package2">选择套餐2</button>
<button onclick="radioChecked(this)" data-target="#package3">选择套餐3</button>

对应的通用函数：

function radioChecked(btn) {
  // 获取按钮上的data-target属性值
  const targetSelector = btn.dataset.target;
  const packageRadio = document.querySelector(targetSelector);
  packageRadio.checked = true;
}

说明：这种方式扩展性更强，后续新增按钮和单选框时，只需要给按钮添加对应的data-target属性即可，无需修改函数代码，也不用受限于ID的命名规则。

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