获取单选按钮的选定值
[英]Getting selected value for radio button
问题描述
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="colors" value="red" id="myRadio">Red color
<p>Click the "Try it" button to display the value of the value attribute of the radio button.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("myRadio").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
从w3schools的单选按钮获取价值的基本示例。 在上面的示例中，我需要获取显示值。
例如，我需要Red color
不是red值。 这里的例子
3 个解决方案
解决方案1
2 2015-01-07 15:38:04
与其仅将文本包装在标签中，不如使它有用
<label>
<input type="radio" name="colors" value="red" id="myRadio" />
Red Colour
</label>
现在，您的代码可以执行以下操作：
function myFunction() {
var radio = document.getElementById("myRadio"),
label = radio.parentNode,
text = (label.textContent || label.innerText).replace(/^\s+|\s+$/g,"");
document.getElementById("demo").innerHTML = text;
}
这将获取单选按钮（标签）的父级，获取其文本内容，在其前后去除空格，并输出结果： Red Colour 。
对于奖励积分，您现在可以单击“红色”文本以选择单选按钮。 可用性真棒！
好多了。
解决方案2
1 2015-01-07 15:32:43
您应该将该文本包装在label以帮助定位，并找到.nextElementSibling的.innerHTML 。
var x = document.getElementById("myRadio").nextElementSibling.innerHTML;
document.getElementById("demo").innerHTML = x;
解决方案3
1 2015-01-07 15:34:07
您可以将文本包装在标签标签中，然后使用nextSibling.innerHTML在标签内获取文本。
添加标签：
<input type="radio" name="colors" value="red" id="myRadio" /><label>Red color</label>
然后使用nextSibling.innerHTML代替value ：
var x = document.getElementById("myRadio").nextSibling.innerHTML;
获取单选按钮选择的值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.