RadioGroup與JavaScript交互技巧

在網頁中使用RadioGroup與JavaScript交互可以實現一些動態交互效果，比如根據用戶選擇的選項顯示不同的內容或觸發不同的操作。以下是一些技巧和示例代碼：

1. 獲取選中的選項值：

const radioGroup = document.getElementsByName('myRadioGroup');
let selectedValue;
for (const radio of radioGroup) {
  if (radio.checked) {
    selectedValue = radio.value;
    break;
  }
}
console.log(selectedValue);

2. 根據選項值執行不同的操作：

const radioGroup = document.getElementsByName('myRadioGroup');
for (const radio of radioGroup) {
  radio.addEventListener('change', function() {
    if (this.value === 'option1') {
      // 執行操作1
    } else if (this.value === 'option2') {
      // 執行操作2
    }
  });
}

3. 根據選項值顯示不同的內容：

const radioGroup = document.getElementsByName('myRadioGroup');
const content1 = document.getElementById('content1');
const content2 = document.getElementById('content2');

for (const radio of radioGroup) {
  radio.addEventListener('change', function() {
    if (this.value === 'option1') {
      content1.style.display = 'block';
      content2.style.display = 'none';
    } else if (this.value === 'option2') {
      content1.style.display = 'none';
      content2.style.display = 'block';
    }
  });
}

通過以上技巧和示例代碼，您可以實現RadioGroup與JavaScript的交互，并根據用戶的選擇來展示不同的內容或執行不同的操作。這樣可以提升用戶體驗，使頁面更加動態和交互。