如何通过jQuery/JavaScript获取选中单选框关联的input-group文本框值

以下分别提供jQuery和原生JavaScript两种实现方式，核心逻辑为选中单选框时，通过父容器定位到关联的文本输入框，获取值后自行存储到变量/本地存储/表单提交参数中即可。

jQuery 实现 #

// 监听单选框变更事件
$('input[type="radio"][name="choosen"]').on('change', function () {
  if ($(this).is(':checked')) {
    // 定位到对应文本输入框，获取值
    const selectedInputVal = $(this).closest('.input-group').find('input[name="opt[]"]').val();
    // 存储逻辑示例：存到全局变量
    window.selectedOptVal = selectedInputVal;
    // 也可以存到本地存储
    // localStorage.setItem('selected_opt', selectedInputVal);
  }
});

// 如果需要提交时再获取，可以用这段代码
function getSelectedVal() {
  const checkedRadio = $('input[type="radio"][name="choosen"]:checked');
  return checkedRadio.closest('.input-group').find('input[name="opt[]"]').val();
}

原生JavaScript 实现 #

// 监听单选框变更事件
document.querySelectorAll('input[type="radio"][name="choosen"]').forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      // 定位到对应文本输入框，获取值
      const selectedInputVal = this.closest('.input-group').querySelector('input[name="opt[]"]').value;
      // 存储逻辑示例：存到全局变量
      window.selectedOptVal = selectedInputVal;
      // 也可以存到本地存储
      // localStorage.setItem('selected_opt', selectedInputVal);
    }
  })
})

// 提交时获取的写法
function getSelectedVal() {
  const checkedRadio = document.querySelector('input[type="radio"][name="choosen"]:checked');
  return checkedRadio.closest('.input-group').querySelector('input[name="opt[]"]').value;
}

补充说明 #

如果需要在文本输入框内容变更时，同步更新已选中单选对应存储的值，可以额外给文本输入框绑定input事件，判断当前行的单选是否选中，选中则更新存储值即可。

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