如何只渲染一次字段集和图例标签(用于3个单选按钮输出)

<div id="container">
  <fieldset id="fieldSet1">
    <!-- 第一个字段集内容 -->
  </fieldset>
  <fieldset id="fieldSet2">
    <!-- 第二个字段集内容 -->
  </fieldset>
  <fieldset id="fieldSet3">
    <!-- 第三个字段集内容 -->
  </fieldset>
  
  <div id="legend">
    <!-- 图例标签内容 -->
  </div>
</div>

<script>
  // 获取单选按钮元素
  var radioButtons = document.querySelectorAll('input[type="radio"]');
  
  // 监听单选按钮的改变事件
  radioButtons.forEach(function(radioButton) {
    radioButton.addEventListener('change', function() {
      // 获取选中的单选按钮的值
      var selectedValue = this.value;
      
      // 渲染字段集和图例标签
      renderFieldSet(selectedValue);
      renderLegend(selectedValue);
    });
  });
  
  // 渲染字段集内容
  function renderFieldSet(selectedValue) {
    var fieldSet1 = document.getElementById('fieldSet1');
    var fieldSet2 = document.getElementById('fieldSet2');
    var fieldSet3 = document.getElementById('fieldSet3');
    
    // 根据选中的值显示或隐藏字段集
    if (selectedValue === 'option1') {
      fieldSet1.style.display = 'block';
      fieldSet2.style.display = 'none';
      fieldSet3.style.display = 'none';
    } else if (selectedValue === 'option2') {
      fieldSet1.style.display = 'none';
      fieldSet2.style.display = 'block';
      fieldSet3.style.display = 'none';
    } else if (selectedValue === 'option3') {
      fieldSet1.style.display = 'none';
      fieldSet2.style.display = 'none';
      fieldSet3.style.display = 'block';
    }
  }
  
  // 渲染图例标签内容
  function renderLegend(selectedValue) {
    var legend = document.getElementById('legend');
    
    // 根据选中的值设置图例标签的内容
    if (selectedValue === 'option1') {
      legend.innerHTML = '图例标签1';
    } else if (selectedValue === 'option2') {
      legend.innerHTML = '图例标签2';
    } else if (selectedValue === 'option3') {
      legend.innerHTML = '图例标签3';
    }
  }
</script>