Question

我有一个带有三个单选按钮的div。我希望用户能够选择任何单选按钮，并且选中的单选按钮值应显示在div中，且ID为test。例如，如果选择了值为“男性”的广播，则应显示“男性”。

这是我的代码：

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

使用jQuery change()事件检测单选按钮的更改，并使用e.target.value获取当前单选按钮的值。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

在vanilla JavaScript中：

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

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

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

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

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

从单选按钮获取文本

3 个答案: