ReactJS中如何获取单选按钮与输入框的值？其他单选选中时取输入框值

嘿，这个需求太常见啦！我来给你分享几种实用的实现方式，不管你用原生JS还是jQuery都能搞定～

首先先假设你的表单HTML结构大概是这样（你可以对应自己的结构调整id和name）：

<form id="myForm">
  <label>
    <input type="radio" name="option" value="opt1"> 选项1
  </label>
  <label>
    <input type="radio" name="option" value="opt2"> 选项2
  </label>
  <label>
    <input type="radio" name="option" value="opt3"> 选项3
  </label>
  <label>
    <input type="radio" name="option" value="other" id="otherRadio"> 其他
  </label>
  <input type="text" id="otherInput" placeholder="请输入其他内容" style="display: none;">
  <button type="submit">提交</button>
</form>

方法一：原生JavaScript实现 #

1. 先控制输入框的显示/隐藏 #

先给「其他」单选按钮绑定change事件，选中时显示输入框，取消选中就隐藏：

const otherRadio = document.getElementById('otherRadio');
const otherInput = document.getElementById('otherInput');

otherRadio.addEventListener('change', function() {
  // 选中状态切换时，同步显示/隐藏输入框
  otherInput.style.display = this.checked ? 'block' : 'none';
});

2. 获取值的核心逻辑（以表单提交为例） #

当需要获取值的时候（比如用户点击提交按钮），先判断选中的是不是「其他」单选按钮，如果是，就取对应输入框的值：

const myForm = document.getElementById('myForm');

myForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 先阻止默认提交，处理自定义逻辑
  
  let finalValue;
  // 找到当前选中的单选按钮
  const selectedRadio = document.querySelector('input[name="option"]:checked');
  
  if (selectedRadio.value === 'other') {
    // 选中「其他」时，取输入框的内容（记得去除首尾空格）
    finalValue = otherInput.value.trim();
    // 建议加个简单校验，避免空提交
    if (!finalValue) {
      alert('选了「其他」的话请输入具体内容哦～');
      return;
    }
  } else {
    // 选中普通选项时，直接取单选按钮的值
    finalValue = selectedRadio.value;
  }
  
  // 到这里就拿到最终需要的值了，接下来可以做提交或者其他处理
  console.log('最终选中的值：', finalValue);
});

方法二：jQuery实现（如果项目用了jQuery） #

如果你的项目已经引入了jQuery，代码会更简洁：

1. 控制输入框显示/隐藏 #

$('#otherRadio').on('change', function() {
  // toggle方法会根据checked状态自动显示/隐藏输入框
  $('#otherInput').toggle(this.checked);
});

2. 提交时获取值 #

$('#myForm').on('submit', function(e) {
  e.preventDefault();
  
  let finalValue;
  const selectedRadio = $('input[name="option"]:checked');
  
  if (selectedRadio.val() === 'other') {
    finalValue = $('#otherInput').val().trim();
    if (!finalValue) {
      alert('选了「其他」的话请输入具体内容哦～');
      return;
    }
  } else {
    finalValue = selectedRadio.val();
  }
  
  console.log('最终选中的值：', finalValue);
});

额外小提示 #

• 一定要给「其他」单选按钮和对应的输入框设置唯一的id，这样能精准定位元素，避免和其他表单控件混淆。
• 如果是Vue/React这类框架，逻辑会更简单：用数据绑定（比如Vue的v-model）关联单选按钮的值，根据值判断是否渲染输入框，直接取绑定的输入框数据字段就行，不用手动操作DOM～

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