如何获取单选框选中项对应输入框的值，为空时弹窗提示？

需求 #

我做了一组单选框，要实现：

• 选中check-me时显示输入框send1
• 选中check-other时显示send2
• 选中check-emp时显示send3
  还要能获取当前选中单选框对应输入框的值，要是输入框为空就弹提示。

原代码问题 #

我写了下面的代码，但没法正常工作：

原JavaScript代码 #

check1 = document.getElementById("check-me");
check2 = document.getElementById("check-other");
check3 = document.getElementById("check-emp");

if (check1.checked) {
  name = document.getElementById("send1");
}
elseif(check2.checked) {
  name = document.getElementById("send2");
}
elseif(check3.checked) {
  name = document.getElementById("send3");
}

//alert when input is blank
if (name == null || name == "") {
  alert("your input is blank!");
}

原HTML代码 #

<input class="form-check-input" type="radio" id="check-me" name="chooseReq" checked>
<input class="form-check-input" type="radio" id="check-other" name="chooseReq">
<input class="form-check-input" type="radio" id="check-emp" name="chooseReq">

<input type="text" class="form-control" id="send1" name="send1">
<input type="text" class="form-control" id="send2" name="send2">
<input type="text" class="form-control" id="send3" name="send3">

代码问题分析 #

1. elseif拼写错误，JavaScript里正确写法是else if（空格分开）
2. 缺少单选框切换时的显示/隐藏逻辑，原代码没控制输入框的显示状态
3. 输入框为空的判断逻辑错误：name是DOM元素对象，name == ""永远不成立，应该判断输入框的value属性
4. 变量未声明（直接赋值会变成全局变量，存在风险）
5. 代码没有绑定触发时机（比如点击提交按钮、单选框切换时执行验证）

修正后的完整代码 #

HTML（添加初始隐藏状态和提交按钮） #

<!-- 单选框组 -->
<input class="form-check-input" type="radio" id="check-me" name="chooseReq" checked>
<label for="check-me">选我</label>
<input class="form-check-input" type="radio" id="check-other" name="chooseReq">
<label for="check-other">选其他</label>
<input class="form-check-input" type="radio" id="check-emp" name="chooseReq">
<label for="check-emp">选员工</label>

<!-- 输入框组，初始只显示send1 -->
<input type="text" class="form-control input-group" id="send1" name="send1" placeholder="输入内容">
<input type="text" class="form-control input-group" id="send2" name="send2" placeholder="输入内容" style="display:none;">
<input type="text" class="form-control input-group" id="send3" name="send3" placeholder="输入内容" style="display:none;">

<!-- 提交按钮 -->
<button id="submit-btn">提交</button>

JavaScript（添加切换显示和验证逻辑） #

// 获取元素
const radios = document.querySelectorAll('input[name="chooseReq"]');
const inputs = document.querySelectorAll('.input-group');
const submitBtn = document.getElementById('submit-btn');

// 单选框切换时控制输入框显示/隐藏
radios.forEach(radio => {
  radio.addEventListener('change', () => {
    // 先隐藏所有输入框
    inputs.forEach(input => input.style.display = 'none');
    // 根据选中的单选框显示对应输入框
    if (radio.id === 'check-me') {
      document.getElementById('send1').style.display = 'block';
    } else if (radio.id === 'check-other') {
      document.getElementById('send2').style.display = 'block';
    } else if (radio.id === 'check-emp') {
      document.getElementById('send3').style.display = 'block';
    }
  });
});

// 提交时验证输入
submitBtn.addEventListener('click', () => {
  let targetInput = null;
  // 找到当前选中的单选框对应的输入框
  radios.forEach(radio => {
    if (radio.checked) {
      if (radio.id === 'check-me') {
        targetInput = document.getElementById('send1');
      } else if (radio.id === 'check-other') {
        targetInput = document.getElementById('send2');
      } else if (radio.id === 'check-emp') {
        targetInput = document.getElementById('send3');
      }
    }
  });

  // 验证输入是否为空
  if (targetInput && targetInput.value.trim() === '') {
    alert('输入不能为空！');
    targetInput.focus(); // 聚焦到空输入框
    return false;
  }
  // 验证通过后的逻辑（比如提交表单）
  alert('输入有效，准备提交！');
});

关键改进点 #

• 修复elseif拼写错误，改用else if
• 添加单选框change事件，实现输入框的显示/隐藏切换
• 修正空值判断逻辑：使用targetInput.value.trim() === ""检查输入内容
• 用const/let声明变量，避免全局污染
• 添加提交按钮绑定验证逻辑，确保触发时机合理
• 初始状态隐藏未选中的输入框，符合需求预期

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