如何重构JavaScript函数，实现页面加载时设置单选按钮选中状态与样式？

我来帮你搞定这个需求！你的核心目标是让toggleActiveState既能处理单选按钮的点击交互，又能在页面加载时通过指定表单name和值来设置选中状态与对应的active类对吧？下面是具体的实现思路和完整代码：

核心重构思路 #

• 兼容两种调用模式：让函数既能接收event对象（处理点击事件），也能接收name和value参数（处理初始化）
• 提取公共逻辑：把「清除按钮组所有active类」「设置目标元素active状态」这些重复操作抽成独立函数，让代码更清晰易维护
• 初始化调用：页面加载完成后，直接调用重构后的函数传入目标name和值即可

重构后的完整代码 #

JavaScript 部分 #

// 清除指定按钮组下所有的active类
function clearActiveStates(btnGroup) {
  const buttons = btnGroup.getElementsByClassName('js__btn-toggle');
  for (let i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove('active');
  }
}

// 给指定label添加active类，并选中对应的radio
function setActiveState(labelEl) {
  clearActiveStates(labelEl.closest('[data-toggle-has-btn-group]'));
  labelEl.classList.add('active');
  labelEl.querySelector('input[type="radio"]').checked = true;
}

// 重构后的主函数
function toggleActiveState(arg1, arg2) {
  // 情况1：处理点击事件（传入event对象）
  if (arg1 instanceof Event) {
    const el = arg1.target;
    const parentLabel = el.parentElement;
    setActiveState(parentLabel);
    return;
  }

  // 情况2：处理初始化调用（传入name和value）
  const radioName = arg1;
  const targetValue = arg2;
  // 找到对应的radio元素
  const targetRadio = document.querySelector(`input[name="${radioName}"][value="${targetValue}"]`);
  if (targetRadio) {
    const parentLabel = targetRadio.parentElement;
    setActiveState(parentLabel);
  }
}

// 页面加载完成后执行初始化
window.addEventListener('load', () => {
  // 设置name为"options"、值为"Mrs"的选项为选中状态
  toggleActiveState('options', 'Mrs');
});

HTML 部分（无需修改，保留原有结构即可） #

<div class="form-group"> 
  <div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group> 
    <label class="btn btn-custom btn-outline-primary btn-sm active flex-fill mr-1 js__btn-toggle"> 
      <input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr 
    </label> 
    <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle"> 
      <input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs 
    </label> 
    <label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle"> 
      <input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss 
    </label> 
    <label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle"> 
      <input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other 
    </label> 
  </div> 
</div>

代码说明 #

• clearActiveStates：负责清除指定按钮组内所有js__btn-toggle元素的active类，避免多个元素同时高亮
• setActiveState：先调用清除函数，再给目标label添加active类，并确保对应的radio被选中（保证表单数据和视觉状态一致）
• toggleActiveState：通过判断第一个参数的类型，自动切换处理逻辑——如果是事件对象就处理点击，否则就按name和值查找目标元素
• 页面初始化：通过window.load事件触发初始化调用，确保DOM完全加载后再执行操作

这样修改后，你既可以保留原来的点击交互逻辑，又能在页面加载时轻松指定任意单选组的默认选中状态啦～

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