从单选按钮获取文本[重复]
Posted
技术标签:
【中文标题】从单选按钮获取文本[重复]【英文标题】：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在哪里？ 【参考方案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;
有许多不同的，可能更有效的方法来实现这种效果，但这应该让你开始。
【讨论】：
以上是关于从单选按钮获取文本[重复]的主要内容，如果未能解决你的问题，请参考以下文章