Question

<!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。 Example here

Answer 1

不要只包装标签中的文字，而是让它有用

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

对于奖励积分，您现在可以点击＆＃34;红色＆＃34;文本以选择单选按钮。可用性很棒！

好多了。

Answer 2

您应该将该文字包装在label中以帮助定位该文字并找到.innerHTML .nextElementSibling

var x = document.getElementById("myRadio").nextElementSibling.innerHTML;
document.getElementById("demo").innerHTML = x;

FIDDLE

Answer 3

您可以将文本包装在label标签中，然后使用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;

获取单选按钮的选定值

3 个答案: