コンピュータや音楽の事書いてます

input type="radio" のvalueの謎

    <input name="radioSanka" type="radio" value="yes">参加する<br/>
    <input name="radioSanka" type="radio" value="no">参加しない

片方にチェックをした状態で、デバッガで以下を試すと

document.getElementsByName("radioSanka").forEach((elm, i) => console.log(`index:${i} ${elm.value}`));

両方ともnoになる場合がある

index:0 no
index:1 no

再現性が不明で悩んでいたが原因が分かった

原因

jQueryラジオボタンへcheckedを設定する実験をしていたとき、

$("input[name=radioSanka]").val(["no"])

が正解のところ、知識不足により

$("input[name=radioSanka]").val("no")

を指定すると、

    <input name="radioSanka" type="radio" value="no">参加する<br/>
    <input name="radioSanka" type="radio" value="no">参加しない

両方のvalueがnoに変化してしまった。
ラジオボタンのchecked制御のときはval()ではなくprop()を使った方がミスしにくい。