Javascript：如何顯示所有單選按鈕的值而不管被檢查？

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; 

這只是結束了repeading顯示選中的值幾次，我想顯示，包括未選中的那些所有值一行用逗號分隔。我就怎麼做弄得那麼=（

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(', ');