如何在映射时管理多个单选选项组的状态

// 创建状态管理对象
const state = {};

// 单选选项组1的点击事件处理函数
function handleOption1Click(option) {
  state['group1'] = option;
}

// 单选选项组2的点击事件处理函数
function handleOption2Click(option) {
  state['group2'] = option;
}

// 渲染界面时根据状态管理对象设置选中状态
function render() {
  const option1 = document.getElementById('option1');
  const option2 = document.getElementById('option2');

  option1.checked = state['group1'] === option1.value;
  option2.checked = state['group2'] === option2.value;
}

// 监听选项点击事件
document.getElementById('option1').addEventListener('click', () => {
  handleOption1Click('option1');
  render();
});

document.getElementById('option2').addEventListener('click', () => {
  handleOption2Click('option2');
  render();
});