JavaScript嵌套函数返回值问题：如何获取单选框选中值

我是编程新手，急需帮助。以下是我的代码：

HTML代码 #

<input id='aContainer' type='radio' name='catContainer' value='a'>
<label for="aContainer">a</label>
<input id='bContainer' type='radio' name='catContainer' value='b'>
<label for="bContainer">b</label>
<input id='cContainer' type='radio' name='catContainer' value='c'>
<label for="cContainer">c</label>
<input id='dContainer' type='radio' name='catContainer' value='d'>
<label for="dContainer">d</label>

JavaScript代码 #

let containerValue = () => {

   node.childNodes.forEach((container) => {
    container.addEventListener('input', () => {
      let sampleValue;
      if (container.checked == true) {
        sampleValue = container.value;
      }
      console.log(sampleValue); // 此处能打印结果
      
    });
  })
}
console.log(containerValue());// 此处无输出

我尝试获取sampleValue的值，但不清楚如何从嵌套函数中返回该值。

首先明确核心问题：containerValue函数本身没有返回值，且input事件是异步触发的——只有用户操作单选框时才会执行回调，没法直接从回调里把值返回给外层的containerValue函数。下面是几种实用的处理方式：

方式1：用全局变量存储选中值 #

把选中值存到全局变量里，后续需要使用时直接调用这个变量即可：

let selectedValue; // 全局变量存储选中值

// 先确保node是正确获取的父元素，比如：
const node = document.querySelector('body'); // 替换成实际的父元素选择器

let containerValue = () => {
  node.childNodes.forEach((container) => {
    container.addEventListener('input', () => {
      if (container.checked) {
        selectedValue = container.value;
        console.log('当前选中值:', selectedValue);
      }
    });
  })
}

containerValue();
// 后续需要使用选中值时，直接用selectedValue即可（注意要在用户触发选择后再调用）

方式2：使用回调函数处理值 #

把需要用选中值执行的逻辑封装成回调，在事件触发时直接调用：

const node = document.querySelector('body'); // 替换成实际的父元素选择器

let containerValue = (callback) => {
  node.childNodes.forEach((container) => {
    container.addEventListener('input', () => {
      if (container.checked) {
        callback(container.value);
      }
    });
  })
}

// 调用时传入处理逻辑
containerValue((value) => {
  console.log('选中值:', value);
  // 这里可以写你需要用value做的所有操作
});

方式3：用Promise处理（适合复杂异步场景） #

如果需要在异步流程中获取选中值，可以用Promise包装：

const node = document.querySelector('body'); // 替换成实际的父元素选择器

let getSelectedValue = () => {
  return new Promise((resolve) => {
    // 先检查是否已有选中项
    const checkedItem = node.querySelector('input[name="catContainer"]:checked');
    if (checkedItem) {
      resolve(checkedItem.value);
    }
    // 监听后续选择事件
    node.childNodes.forEach((container) => {
      container.addEventListener('input', () => {
        if (container.checked) {
          resolve(container.value);
        }
      });
    });
  });
}

// 使用时
getSelectedValue().then((value) => {
  console.log('选中值:', value);
});

内容的提问来源于stack exchange，提问作者John