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

【问题标题】：How do I get values when radio button is checked?选中单选按钮时如何获取值？
【发布时间】：2021-08-26 02:30:09
【问题描述】：

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

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>

【问题讨论】：

标签： javascript html radio-button label

【解决方案1】：

这是一个可靠的方法。我为这些元素组添加了标签，因为它可以更轻松地访问关联的文本元素值，还因为它是表单中的好习惯。

我在脚本中设置事件侦听器，而不是为每个元素内联重复它们。同样，这只是良好的做法，并将逻辑与内容分开。

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

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>

【讨论】：

【解决方案2】：

您可以通过它的 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

你可以像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>

【讨论】：