RadioGroup在Web表單中的表單項依賴字段顯示

在Web表單中使用RadioGroup時，通常會使用JavaScript來根據用戶的選擇來顯示或隱藏其他字段。這可以通過監聽RadioGroup的change事件，然后根據用戶選擇的值來顯示或隱藏相應的字段。

例如，假設有一個包含RadioGroup的表單，用戶可以選擇他們的性別。如果用戶選擇“男性”，則顯示另一個字段來輸入身高；如果用戶選擇“女性”，則顯示另一個字段來輸入體重。

可以使用以下示例代碼來實現這個功能：

<form>
  <label>性別</label>
  <input type="radio" name="gender" value="male" id="male"> 男性
  <input type="radio" name="gender" value="female" id="female"> 女性

  <div id="heightInput" style="display: none;">
    <label for="height">身高</label>
    <input type="text" id="height">
  </div>

  <div id="weightInput" style="display: none;">
    <label for="weight">體重</label>
    <input type="text" id="weight">
  </div>
</form>

<script>
  const maleRadio = document.getElementById('male');
  const femaleRadio = document.getElementById('female');
  const heightInput = document.getElementById('heightInput');
  const weightInput = document.getElementById('weightInput');

  maleRadio.addEventListener('change', function() {
    if (maleRadio.checked) {
      heightInput.style.display = 'block';
      weightInput.style.display = 'none';
    }
  });

  femaleRadio.addEventListener('change', function() {
    if (femaleRadio.checked) {
      heightInput.style.display = 'none';
      weightInput.style.display = 'block';
    }
  });
</script>

在這個例子中，當用戶選擇“男性”時，身高輸入字段會顯示，而體重輸入字段會隱藏；當用戶選擇“女性”時，身高輸入字段會隱藏，而體重輸入字段會顯示。這種方法可以根據RadioGroup的選擇來動態顯示或隱藏相關的字段，以提供更好的用戶體驗。