Question

我有四个单选按钮，我想显示使用javascript的所有值。据说，他们的元素是1-4。我如何一起显示所有四个的值？

<input type="radio" name="radiobutton" value="A" > Apples
<input type="radio" name="radiobutton" value="B" checked Oranges
<input type="radio" name="radiobutton" value="C" > Bananas
<input type="radio" name="radiobutton" value="D" > Cherry

如何以逗号分隔显示连续四个值的所有值？

每次我在Javascript中输入我的代码来显示它时，它只显示选中的值，而我不知道如何显示其他值（A，C，D）。

这就是我在我的代码中输入以尝试显示它的内容：

var radiobuttons = document.andy.radiobutton.value + document.andy.radiobutton.value + document.andy.radiobutton.value;
ans.innerHTML = radiobuttons;

这最终会重复多次显示已检查的值，并且我想显示所有值，包括未用逗号分隔的行中的所有值。我对如何这样做感到困惑=（

Answer 1

使用es6，下面将有效：

var values = Array.from(document.querySelectorAll('input[type=radio]'))
    .map(val => val.value) // creates an array of all values
    .join(); // joins the array to a string, separated by comma

DEMO

或没有es6，适用于较旧的浏览器：

var values = [].slice.call(document.querySelectorAll('input[type=radio]'))
    .map(function(val) { return val.value })
    .join();

在这两种情况下，只需做

document.getElementById('result').innerHTML = values;

得到你想要的东西。

DEMO with output in div

Answer 2

这是一个解决方案，它迭代每个单选按钮并获取其检查状态

var radiobuttons = document.andy.radiobutton;
var answer = [];

for (var i = 0; i < radiobuttons.length; i++) {
    answer.push(radiobuttons[i].value + ': ' + radiobuttons[i].checked);
}

document.getElementById('ans').innerHTML = answer.join(', ');

Javascript：如何显示所有单选按钮的值而不管被检查？

2 个答案: