从单选按钮获取文本[重复]答案

【问题标题】：Get text from radio buttons [duplicate]从单选按钮获取文本[重复]
【发布时间】：2018-11-25 09:50:44
【问题描述】：

我有一个带有三个单选按钮的div。我希望用户能够选择任何单选按钮，并且选定的单选按钮值应该出现在div 中，id 为test。例如，如果选择了值为“Male”的收音机，则应该出现“Male”。

这是我的代码：

<html>
  <body>
    <div>
      <input type="radio" name="gender" value="male" checked> Male<br>
      <input type="radio" name="gender" value="female"> Female<br>
      <input type="radio" name="gender" value="other"> Other  
    </div>
    <div id="test" style="border: 1px solid black; width: 80px; height: 30px;"></div>
  </body>
</html>

【问题讨论】：

你的javascript在哪里？

标签： javascript jquery

【解决方案1】：

您可以收听单选按钮的change 事件，并在更改时读取选中的单选按钮的值。

$('input[type=radio]').change(function() {
  $('#test').text($('input[type=radio]:checked').val());
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</div>
<div id="test" style="border:1px solid black; width: 80px; height: 30px;"></div>

【讨论】：

完美，有效！

【解决方案2】：

有点晚了，但这是我的贡献：

使用jQuerychange()事件检测单选按钮的变化，使用e.target.value获取当前单选按钮的值。

$('#test').text($('input[checked]').val());
$('input[type=radio][name=gender]').change(function(e) {
	$('#test').text(e.target.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radio_buttons">
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</div>
<div id="test" style="border:1px solid black; width: 80px; height: 30px;"></div>

【讨论】：

这太棒了！谢谢队友:)
test div 的初始内容是other，即使选中了male。
这是一个奇怪的错误。

【解决方案3】：

在原生 JavaScript 中：

首先，您需要为每个元素分配变量。

var maleInputEl = document.querySelector("[value=male]");
var femaleInputEl = document.querySelector("[value=female]");
var otherInputEl = document.querySelector("[value=other]");
var testEl = document.getElementById("test");

接下来，您将添加一个 value 变量来存储当前选定的值，并向每个输入添加事件侦听器以侦听点击。

var value;

maleInputEl.addEventListener('click', function() {
    value = maleInputEl.value;
    insertText(value);
});

femaleInputEl.addEventListener('click', function() {
    value = femaleInputEl.value;
    insertText(value);
});

otherInputEl.addEventListener('click', function() {
    value = otherInputEl.value;
    insertText(value);
});

最后，您需要使用 insertText() 函数插入该文本。

function insertText(val) {
    testEl.innerText = val;
}

有许多不同的，可能更有效的方法来实现这种效果，但这应该让你开始。

【讨论】：