ラジオボタンの取得とは何か
ラジオボタンは「同じ name を持つ選択肢の中から“必ず0か1つ”だけ選ぶ」入力です。JavaScript では“グループとして”扱うのがコツです。ここが重要です：同じ name のラジオは RadioNodeList として取得し、選択中の値は group.value で一発で読めます。個別の input を直接見るより、グループで扱うほうが短く正確です。
基本の取得（RadioNodeList と現在値）
同じ name のラジオをグループで掴む
<form id="f">
<label><input type="radio" name="color" value="red">赤</label>
<label><input type="radio" name="color" value="blue">青</label>
<label><input type="radio" name="color" value="green">緑</label>
</form>
<script>
const group = f.elements["color"]; // RadioNodeList
console.log(group.value); // 例: "blue"（未選択なら ""）
</script>
ここが重要です：form.elements[“name”] で同名のラジオ群を取得できます。RadioNodeList.value は“選ばれている1つ”の value を返すため、未選択なら空文字になります。個々の checked を探す手間が不要です。
クエリで取得し、選択中だけ抜き出す
<script>
const radios = document.querySelectorAll('input[type="radio"][name="color"]');
const selected = [...radios].find(r => r.checked)?.value || "";
console.log(selected);
</script>
ここが重要です：フォーム外や複数フォームがあるページでは、明示的なセレクタが安心です。checked な要素を1つ探して、その value を使います。
イベントと同期（ユーザー操作に反応する）
change で選択値を反映する
<script>
function sync() {
console.log("選択値:", group.value);
}
[...group].forEach(r => r.addEventListener("change", sync));
sync(); // 初期状態も反映
</script>
ここが重要です：ラジオは“確定操作”で選択が切り替わるので、change イベントで十分です。初期表示も一度同期しておくと UI が安定します。
input と change の使い分け
<script>
group[0].addEventListener("input", () => {/* 即時反応が欲しいなら */});
group[0].addEventListener("change", () => {/* 確定後の処理 */});
</script>
ここが重要です：多くのケースでは change だけでOK。ライブ反応が必要な特殊な UI 以外は change を選ぶとシンプルです。
プログラムで選択する（値指定と checked の操作）
value で一発選択
<script>
function setRadioValue(group, value) {
[...group].forEach(r => r.checked = (r.value === value));
}
setRadioValue(group, "green");
console.log(group.value); // "green"
</script>
ここが重要です：グループの中で value が一致するものを checked=true にすれば、他は自動で外れます。存在しない値を指定すると全て未選択になるため、フォールバックの用意が安全です。
個別参照で選択
<script>
const blue = [...group].find(r => r.value === "blue");
if (blue) blue.checked = true;
</script>
ここが重要です：特定の1件だけ選びたいときは、該当ラジオを見つけて checked を true にします。他は自動で false になります。
変更時のイベント発火（明示通知）
<script>
setRadioValue(group, "red");
group[0].dispatchEvent(new Event("change", { bubbles: true })); // 必要なら手動で通知
</script>
ここが重要です：コードで選択を変えた後に処理を走らせたい場合、change を明示発火します。ユーザー操作にだけ反応させたいなら不要です。
FormData と送信（サーバー視点での値取得）
送信相当の値を読む
<form id="f">
<label><input type="radio" name="role" value="admin">管理者</label>
<label><input type="radio" name="role" value="user" checked>一般</label>
</form>
<script>
const fd = new FormData(f);
console.log(fd.get("role")); // "user"（未選択なら null）
</script>
ここが重要です：未選択のラジオは“キーなし”になるため、FormData.get(“name”) が null なら未選択です。DOM側で group.value が空文字でも同義です。name が付いていないラジオは送信対象にならないので必ず name を設定します。
必須判定とエラー表示
<script>
function requireRadio(group) {
if (!group.value) {
alert("いずれかを選択してください");
return false;
}
return true;
}
// 送信前チェックで使用
</script>
ここが重要です：未選択は group.value が “”（または FormData.get が null）で判定します。エラー表示は“確定後（change/submit直前）”に行うと体験が良くなります。
初期選択・無効化・表示の注意点
初期選択を HTML で明示する
<input type="radio" name="plan" value="basic" checked>
<input type="radio" name="plan" value="pro">
ここが重要です：初期選択は HTML の checked 属性が最も分かりやすく、defaultChecked として扱われます。JSで後から選ぶより、意図が明確になります。
disabled と hidden の扱い
<input type="radio" name="plan" value="enterprise" disabled>
ここが重要です：disabled なラジオは選べず、送信にも含まれません。CSSで非表示にするだけでは送信対象からは外れないため、無効化するなら disabled を使います。
ラベルクリックで操作しやすくする
<label for="r1">赤</label>
<input id="r1" type="radio" name="color" value="red">
ここが重要です：for と id を対応させる、またはラベルで input を囲うと、ラベルクリックでも選択できて操作性が上がります。
よくある落とし穴と回避策
未選択の判定を value だけで行い、空文字と null を混同して不具合になることがあります。DOM側は group.value が空文字、送信側は FormData.get が null——“どちらでも未選択”と覚えておくと混乱しません。単一の input を参照して checked を読もうとすると、グループの他の選択を見落とします。必ず“同じ name の集合”で扱うのが正解です。存在しない value をセットすると全て未選択になるため、選択肢と値の整合チェックを先に行うと安全です。name のないラジオは送信されないので、フォーム送信対象なら name を必ず付けてください。
まとめ
ラジオボタンは“同じ name のグループ”で扱い、現在の選択値は RadioNodeList.value を使うのが最短で確実です。選択の変更は checked を true にするだけで他が自動で外れ、値指定のユーティリティで一括操作も簡単。送信相当の確認は FormData.get を使い、未選択は null（DOM側では空文字）で判定します。初期選択は HTML の checked で明示、イベントは change を中心に同期すれば、初心者でも読みやすく壊れにくい“ラジオボタンの取得と操作”を実装できます。