选中单选按钮时如何获取值？
[英]How do I get values when radio button is checked?
问题描述
I have three radio buttons with another input.
我有三个带有另一个输入的单选按钮。 What I want is when I click on any radio button those another input value should be display in the label tag.我想要的是当我单击任何单选按钮时，那些另一个输入值应该显示在 label 标记中。 I try some code but It's not correct.我尝试了一些代码，但它不正确。
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>
4 个解决方案
解决方案1
1 已采纳 2021-06-09 05:42:13
You can use nextElementSibling like in document.getElementById("investplan").innerHTML = ele[i].nextElementSibling.value;您可以像在document.getElementById("investplan").innerHTML = ele[i].nextElementSibling.value;中使用nextElementSibling
Demo演示
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>
解决方案2
1 2021-06-09 05:47:35
Here is a solid way to do it.这是一个可靠的方法。 I've added labels to these element groups because it makes it easier to access the associated text element value, and also because it's good practice in forms.我为这些元素组添加了标签，因为它可以更轻松地访问关联的文本元素值，还因为它在 forms 中是一种很好的做法。
I set up the event listeners in a script rather than repeat them inline for each element.我在脚本中设置事件侦听器，而不是为每个元素内联重复它们。 Again, just good practice and keeps logic separated from content.同样，只是良好的做法，并将逻辑与内容分开。
I've also added a way to kick it off on page load and populate that element immediately based on whatever default checked value exists.我还添加了一种在页面加载时启动它并根据存在的任何默认检查值立即填充该元素的方法。
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>
解决方案3
1 2021-06-09 05:47:42
you can try this only if That radio buttons are fixed id's and name只有当单选按钮是固定的 ID 和名称时，您才能尝试此操作
document.getElementById("investplan").innerHTML = "Invest plan is"+document.getElementById("planinvest"+(i+1)).value;
here i am concatenating checkbox index +1 and getting values of planinvestX value.在这里，我连接复选框索引 +1 并获取 planinvestX 值的值。
Full code:完整代码：
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
0 2021-06-09 05:50:33
You can get value of input by it's id dynamically您可以通过其 id 动态获取输入值
Demo演示
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.