选中单选按钮时如何获取值？

Question

我有三个带有另一个输入的单选按钮。我想要的是当我点击任何单选按钮时，另一个输入值应该显示在标签标签中。我尝试了一些代码，但它不正确。

function displayRadioValue() {
  var ele = document.getElementsByName('plan');  
    for(i = 0; i < ele.length; i++) {
      if(ele[i].checked)
        document.getElementById("investplan").innerHTML = document.getElementById("planinvest").value;
      }
}

<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text"value="10" id="planinvest1" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="20" id="planinvest2" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="30" id="planinvest3" class="hidden-plan-type">

<label id="investplan"></label>

Answer 1

您可以像 document.getElementById("investplan").innerHTML = ele[i].nextElementSibling.value;

中那样使用 nextElementSibling

演示

function displayRadioValue() {
  var ele = document.getElementsByName('plan');
  for (i = 0; i < ele.length; i++) {
    if (ele[i].checked)
      document.getElementById("investplan").innerHTML = ele[i].nextElementSibling.value;
  }
}

<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text" value="10" id="planinvest1" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="20" id="planinvest2" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="30" id="planinvest3" class="hidden-plan-type">

<label id="investplan"></label>

Answer 2

这是一个可靠的方法。我已将标签添加到这些元素组，因为它可以更轻松地访问关联的文本元素值，也因为它是表单中的良好做法。

我在脚本中设置了事件侦听器，而不是为每个元素重复内联。同样，只是良好的实践，并保持逻辑与内容分离。

我还添加了一种在页面加载时启动它并根据存在的任何默认检查值立即填充该元素的方法。

window.onload = function() {
  [...document.querySelectorAll('input[name="plan"]')].forEach(el => el.addEventListener('change', displayRadioValue));

  function displayRadioValue(e) {
    if (e.target.checked) {
      let val = e.target.closest('label').querySelector('input[type="text"]').value;
      document.getElementById("investplan").innerHTML = val;
    }
  }

  //initialize

  displayRadioValue({
    target: document.querySelector('input[name="plan"]:checked')
  })
}

label {
  display: block;
  margin-bottom: 5pc'

}

<label>
<input type="radio" name="plan" checked />
<input type="text" value="10" id="planinvest1" class="hidden-plan-type">
</label>

<label>
<input type="radio" name="plan" />
<input type="text" value="20" id="planinvest2" class="hidden-plan-type">
</label>

<label>
<input type="radio" name="plan" />
<input type="text" value="30" id="planinvest3" class="hidden-plan-type">
</label>

<label id="investplan"></label>

Answer 3

你可以试试这个仅当该单选按钮是固定的 ID 和名称时

document.getElementById("investplan").innerHTML = "Invest plan is"+document.getElementById("planinvest"+(i+1)).value;

我在这里连接复选框索引 +1 并获取 planinvestX 值的值。

完整代码：

    function displayRadioValue() {
  var ele = document.getElementsByName('plan');  
    for(i = 0; i < ele.length; i++) {
      if(ele[i].checked)
        document.getElementById("investplan").innerHTML = "Invest plan is "+document.getElementById("planinvest"+(i+1)).value;
      }
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text" value="10" id="planinvest1" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="20" id="planinvest2" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text" value="30" id="planinvest3" class="hidden-plan-type">

<label id="investplan"></label>
</body>
</html>

Answer 4

您可以通过输入的 id 动态获取输入的值

演示

function displayRadioValue() {
   var ele = document.getElementsByName('plan');  
for(i = 0; i < ele.length; i++) {
   let inputIndex = i+1
  if(ele[i].checked)
    document.getElementById("investplan").innerHTML = document.getElementById(`planinvest${inputIndex}`).value;
}
}

<input type="radio" name="plan" checked onclick="displayRadioValue()" />
<input type="text"value="10" id="planinvest1" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="20" id="planinvest2" class="hidden-plan-type">

<input type="radio" name="plan" onclick="displayRadioValue()" />
<input type="text"value="30" id="planinvest3" class="hidden-plan-type">

<label id="investplan"></label>

选中单选按钮时如何获取值？

How do I get values when radio button is checked?

html

javascript

label

radio-button