JavaScript中监听单选按钮选中状态变化的事件处理

<input type="radio" name="radio-group-one" id="radio-1">
<input type="radio" name="radio-group-one" id="radio-2" checked>
<input type="radio" name="radio-group-one" id="radio-3">

document.getElementById("radio-1").addEventListener('input', (event) => {
    // 当radio-1被点击时，此事件会触发
    console.log(`Radio 1 checked state: ${event.target.checked}`);
    if (event.target.checked) {
        console.log("Radio 1 is now checked.");
    }
});

document.getElementById("radio-2").addEventListener('input', (event) => {
    console.log(`Radio 2 checked state: ${event.target.checked}`);
    if (event.target.checked) {
        console.log("Radio 2 is now checked.");
    }
});
// 为radio-3添加类似监听器...

<div id="radioContainer">
    <input type="radio" name="radio-group-one" id="radio-1">
    <input type="radio" name="radio-group-one" id="radio-2" checked>
    <input type="radio" name="radio-group-one" id="radio-3">
</div>

document.getElementById("radioContainer").addEventListener('input', (evt) => {
  // 查找事件目标元素自身或其最近的祖先中，类型为"radio"的input元素
  const elRadio = evt.target.closest(`[type="radio"]`);

  // 如果事件不是由单选按钮触发的，则不做任何处理
  if (!elRadio) return; 

  // 如果是单选按钮，打印其ID和选中状态
  console.log(`${elRadio.id} 选中状态: ${elRadio.checked}`); 

  if (elRadio.checked) {
      console.log(`单选按钮 ${elRadio.id} 被选中了。`);
      // 在这里执行当该单选按钮被选中时需要执行的逻辑
  } else {
      // 注意：对于radio按钮，当一个被选中时，同组的其他按钮会自动变为未选中，但它们不会触发事件。
      // 这个else分支通常不会在radio按钮的input事件中被触发，因为input事件只在用户直接交互的按钮上触发，
      // 且此时该按钮总是被选中的。
  }
});

<div id="radioContainer">
    <input type="radio" name="radio-group-one" id="radio-1">
    <input type="radio" name="radio-group-one" id="radio-2" checked>
    <input type="radio" name="radio-group-one" id="radio-3">
</div>

document.getElementById("radioContainer").addEventListener('input', (evt) => {
  // 检查事件目标元素是否是一个类型为"radio"的input元素
  if (!evt.target.matches(`[type="radio"]`)) return; // 如果不是，则不做任何处理

  // 如果是单选按钮，打印其ID和选中状态
  console.log(`${evt.target.id} 选中状态: ${evt.target.checked}`); 

  if (evt.target.checked) {
      console.log(`单选按钮 ${evt.target.id} 被选中了。`);
      // 执行当该单选按钮被选中时需要执行的逻辑
  }
});