如何将单选框选中值实时赋值到textarea内容中？

当然有超简便的实现方式！用几行JavaScript就能搞定这个需求，我给你两种实用方案，你可以根据自己的场景选：

方案1：直接给每个单选框绑定事件 #

这种方法直观易懂，适合单选框数量固定的场景：

首先是你的HTML结构（我稍微整理了下格式，不影响功能）：

<form>
  <input type="radio" id="option-1" name="name" value="Hello! I would like to talk to John">
  <label for="option-1">John</label>
  
  <input type="radio" id="option-2" name="name" value="Hello! I would like to talk to Maria">
  <label for="option-2">Maria</label>
  
  <input type="radio" id="option-3" name="name" value="Hello! I would like to talk to Kennedy">
  <label for="option-3">Kennedy</label>
  
  <input type="radio" id="option-4" name="name" value="Hello! I would like to talk to Adam">
  <label for="option-4">Adam</label>
</form>

<form>
  <textarea id="textarea-field" placeholder='Type your message here...' required></textarea>
</form>

然后添加JavaScript代码：

// 选中所有name为"name"的单选框
const radioButtons = document.querySelectorAll('input[name="name"]');
// 获取目标textarea元素
const textarea = document.getElementById('textarea-field');

// 给每个单选框绑定change事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 只在单选框被选中时赋值
    if (this.checked) {
      textarea.value = this.value;
    }
  });
});

这里用change事件比click更精准——只有当单选框的选中状态改变时才触发，避免重复执行逻辑。

方案2：事件委托（更高效） #

如果你的单选框是动态生成的（比如后续会通过JS添加新选项），或者想减少事件绑定的数量，用事件委托更合适：

const textarea = document.getElementById('textarea-field');

// 在父元素上绑定一次事件，利用事件冒泡触发
document.addEventListener('change', function(e) {
  // 判断触发事件的是不是我们目标的单选框
  if (e.target.matches('input[name="name"]')) {
    textarea.value = e.target.value;
  }
});

这种方法不需要给每个单选框单独绑定事件，不管后续新增多少单选框，只要name属性符合，就能自动触发同步逻辑，非常灵活。

小提示 #

• 两种方案都只会在用户点击单选框时覆盖textarea的内容，之后用户可以自由编辑textarea，不会被再次覆盖（除非用户再次点击其他单选框）。
• 确保textarea的id和代码里的textarea-field一致，单选框的name属性统一为name，这样才能正确选中元素。

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