ラジオボタンの値を確認する方法

Question

私が試したすべてのものはうまくいきませんでした。ラジオの1つが選択されているかどうかを条件付きで確認し、常に1つが選択されるようにしたいだけです。どちらが選択されているかを知る必要があります。

<label for="starting">Starting Player:</label> <input type="radio" name="starting" value="1" checked>P1 <input type="radio" name="starting" value="2" id="startingPlayer">P2 document.getElementById("startingPlayer").checked==true

どちらかが常に真か偽作り出します。これを回避する方法はありますか？

Answer 1

ボタンのセットをループして、.checkedプロパティをチェックする必要があります。

必要なときにいつでもこれを行うことができます。ここでは、私はボタンをクリックしてそれをやっています。

var buttons = document.querySelectorAll("input[type=radio]"); 
 
var btnCheck = document.querySelector("button"); 
 
btnCheck.addEventListener("click", checkSelected); 
 

 
function checkSelected(){ 
 
    for(var i = 0; i < buttons.length; ++i){ 
 
    if(buttons[i].checked){ 
 
     console.clear(); 
 
     console.log("The selected radio button has a value of: " + buttons[i].value); 
 
    } 
 
    } 
 
}

<label for="starting">Starting Player:</label> 
 
<input type="radio" name="starting" value="1" checked>P1 
 
<input type="radio" name="starting" value="2" id="startingPlayer">P2 
 
<button>Get Selected Button Value</button>

Answer 2

var player= document.forms.MyForm.starting.value;ソリューション..

Answer 3

ES6解決策になることができます。 Array#forEachを使用して、各ラジオボタンにchangeイベントをバインドし、実際に選択されたボタンの値を記録します。

var elems = document.getElementsByName('starting'); 
 
Array.from(elems).forEach(v => v.addEventListener('change', function() { 
 
    Array.from(elems).forEach(v => v.checked ? console.log(v.getAttribute('value')) : null) 
 
}))

<label for="starting">Starting Player:</label> 
 
<input type="radio" name="starting" value="1" checked>P1 
 
<input type="radio" name="starting" value="2" id="startingPlayer">P2