如何将输入的无线电值分配给文本区域内容？

Question

我有一张表格：

<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>

我有一个textarea的另一种形式

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

我想知道，当用户单击其中一个输入时，是否有任何简单的方法来分配所选input的input在textarea内容中的权限。

Answer 1

更简单的feasible和最简单的方法就是确保为表单分配一个id，这将确保您只是该表单中的selecting Input[type=radio]，而不是页面上的每个input。

还可以使用textContent为您的textArea分配值。使用innerHTML是而不是推荐的。

我们需要使用forEach函数循环使用querySelectorAll函数(返回所有节点列表)找到的所有输入，然后使用addEventListener确保在输入时侦听change事件，并将checked无线电button的值分配给textArea。

现场演示：

​

//get all radio buttons
let getRadios = document.querySelectorAll('#myForm > input[type="radio"]');
//get text area
let getTextArea = document.querySelector('#textarea-field');

//Loop through the radio button
getRadios.forEach(function(radio) {
  radio.addEventListener('change', function() {
    getTextArea.textContent = this.value //assign value to textArea
  })
})

<form id="myForm">
  <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>
  <br>
  <br>
  <textarea id="textarea-field" placeholder='Type your message here...' required>
  </textarea>
</form>

​

Answer 2

如果您只为下面的脚本为每个输入提供一个类，那么它应该可以工作。

<script>
 // GIVE EACH OF YOUR INPUTS A CLASS OF .input
 // THEN ADD THIS SCRIPT
 $(document).ready(function(){
    $('.input').click(function(e) {
        var text = $( this ).val();
        $('#textarea-field').val( text );
 
    });
  });
</script>

Answer 3

你可以这样做

​

const radios = document.querySelectorAll('input');
const textarea = document.querySelector('#textarea-field');

radios.forEach(radio => {

  radio.addEventListener('change', ({
    target
  }) => textarea.innerHTML = target.value);

});

<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>
  <textarea id="textarea-field" placeholder='Type your message here...' required></textarea>
</form>

​