Day18.5 前半のゴール
Day18 では「テキスト入力（input.value）」を扱いました。
Day18.5 では一歩進んで、チェックボックスとラジオボタンを扱います。
チェックボックスとラジオボタンは、
「ユーザーに選択させる」ためのパーツです。
ここを押さえると、アンケート・設定画面・同意確認など、一気に作れるものが増えます。
前半のゴールはこうです。
前半でつかみたい感覚
チェックボックスは「オンかオフか」を扱う（true / false）
ラジオボタンは「選択肢の中から1つだけ」を扱う
テキスト入力と違い、見るプロパティが value ではなく checked になることが多い
チェックボックスとは何か
「オン・オフ」を表現する入力
チェックボックスは、
「この条件に同意するか」「この設定を有効にするか」
といった、オン・オフの状態を表す入力です。
HTML の基本形はこうです。
<label>
<input id="subscribeCheckbox" type="checkbox">
メールマガジンを受け取る
</label>
<button id="submitButton">送信</button>
<p id="result"></p>
ここで大事なのは、
チェックボックスの状態は checked プロパティ で読む、という点です。
const subscribeCheckbox = document.getElementById("subscribeCheckbox");
const submitButton = document.getElementById("submitButton");
const result = document.getElementById("result");
submitButton.addEventListener("click", () => {
const isSubscribed = subscribeCheckbox.checked;
if (isSubscribed) {
result.textContent = "メールマガジンを受け取る設定です。";
} else {
result.textContent = "メールマガジンは受け取りません。";
}
});
ここで isSubscribed は true か false のどちらかです。
文字列ではなく、真偽値（boolean） であることがポイントです。
checked プロパティを深掘りする
value ではなく checked を見る理由
テキスト入力では value を使いましたが、
チェックボックスでは checked を使うのが基本です。
const isChecked = checkboxElement.checked;
checked が true のとき
チェックが入っている
checked が false のとき
チェックが外れている
という意味になります。
もちろん、チェックボックスにも value 属性を付けることはできますが、
「今オンかオフか」を知りたいときは、value ではなく checked を見るのが正しいです。
チェックボックスで「複数の選択」を扱う
好きな言語を複数選んでもらう例
チェックボックスの強みは、
「複数選んでいい」というところです。
<p>好きなプログラミング言語を選んでください（複数可）</p>
<label><input type="checkbox" name="lang" value="JavaScript" id="jsCheckbox"> JavaScript</label>
<label><input type="checkbox" name="lang" value="Python" id="pyCheckbox"> Python</label>
<label><input type="checkbox" name="lang" value="Java" id="javaCheckbox"> Java</label>
<button id="submitButton">送信</button>
<p id="result"></p>
JavaScript で、チェックされているものだけを集めてみます。
const jsCheckbox = document.getElementById("jsCheckbox");
const pyCheckbox = document.getElementById("pyCheckbox");
const javaCheckbox = document.getElementById("javaCheckbox");
const submitButton = document.getElementById("submitButton");
const result = document.getElementById("result");
submitButton.addEventListener("click", () => {
const selected = [];
if (jsCheckbox.checked) {
selected.push("JavaScript");
}
if (pyCheckbox.checked) {
selected.push("Python");
}
if (javaCheckbox.checked) {
selected.push("Java");
}
if (selected.length === 0) {
result.textContent = "何も選択されていません。";
} else {
result.textContent = `選択された言語：${selected.join("、")}`;
}
});
ここでのポイントはこうです。
チェックされているかどうかは checked で判定する
選ばれたものを配列にためて、最後にまとめて表示する
「複数選択 OK」のときは、このパターンがよく登場します。
ラジオボタンとは何か
「どれか1つだけ」を選ばせる入力
ラジオボタンは、
「A / B / C の中から1つだけ選んでください」
という場面で使います。
HTML の基本形はこうです。
<p>性別を選択してください</p>
<label><input type="radio" name="gender" value="male"> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<label><input type="radio" name="gender" value="other"> その他</label>
<button id="submitButton">送信</button>
<p id="result"></p>
ここで重要なのは name 属性が同じ という点です。
name=”gender” が同じラジオボタンは、「グループ」として扱われ、
その中から1つだけ選べるようになります。
ラジオボタンの選択値を取得する
選ばれているものを 1 つだけ取り出す
ラジオボタンは「どれが選ばれているか」を調べる必要があります。
一番素直な書き方はこうです。
const genderRadios = document.querySelectorAll('input[name="gender"]');
const submitButton = document.getElementById("submitButton");
const result = document.getElementById("result");
submitButton.addEventListener("click", () => {
let selectedValue = null;
genderRadios.forEach((radio) => {
if (radio.checked) {
selectedValue = radio.value;
}
});
if (selectedValue === null) {
result.textContent = "性別が選択されていません。";
return;
}
result.textContent = `選択された性別：${selectedValue}`;
});
ここでの重要ポイントは二つです。
ラジオボタンも checked で「選ばれているか」を判定する
選ばれているものが 1 つだけなので、selectedValue に代入していく
ラジオボタンは「複数の input の中から、checked が true のものを探す」
というイメージで扱います。
querySelector を使った書き方（少し発展）
「選ばれているラジオボタンだけ」を直接取る
少しだけ発展ですが、
CSS セレクタを使って「checked なものだけ」を直接取ることもできます。
const selectedRadio = document.querySelector('input[name="gender"]:checked');
if (selectedRadio === null) {
result.textContent = "性別が選択されていません。";
} else {
result.textContent = `選択された性別：${selectedRadio.value}`;
}
input[name="gender"]:checked というセレクタは、
「name が gender で、かつ checked な input」を意味します。
この書き方はとてもよく使うので、
「ラジオボタンの選択値を取るときの定番パターン」として覚えておくと便利です。
チェックボックスとラジオボタンの違いを整理する
どんなときにどちらを使うか
ここまでの内容を、感覚として整理しておきます。
チェックボックス
オン・オフを表す
複数選択してもよい
checked は true / false
ラジオボタン
選択肢の中から 1 つだけ選ぶ
同じ name のグループで 1 つだけ
checked が true のものを探して value を読む
テキスト入力と違って、
「文字列そのもの」よりも「状態（オンかオフか）」を扱うのが特徴です。
Day18.5 前半のミニサンプル
チェックボックス＋ラジオボタンを組み合わせた例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day18.5 フォーム操作② 前半</title>
</head>
<body>
<h1>チェックボックスとラジオボタン</h1>
<h2>メール設定</h2>
<label>
<input id="subscribeCheckbox" type="checkbox">
メールマガジンを受け取る
</label>
<h2>連絡方法</h2>
<p>希望する連絡方法を選んでください</p>
<label><input type="radio" name="contact" value="email"> メール</label>
<label><input type="radio" name="contact" value="phone"> 電話</label>
<label><input type="radio" name="contact" value="none"> 連絡不要</label>
<p>
<button id="submitButton">設定を確認</button>
</p>
<p id="result"></p>
<script>
const subscribeCheckbox = document.getElementById("subscribeCheckbox");
const contactRadios = document.querySelectorAll('input[name="contact"]');
const submitButton = document.getElementById("submitButton");
const result = document.getElementById("result");
submitButton.addEventListener("click", () => {
const isSubscribed = subscribeCheckbox.checked;
let contactValue = null;
contactRadios.forEach((radio) => {
if (radio.checked) {
contactValue = radio.value;
}
});
let message = "";
if (isSubscribed) {
message += "メールマガジン：受け取る。";
} else {
message += "メールマガジン：受け取らない。";
}
if (contactValue === null) {
message += " 連絡方法：未選択。";
} else {
message += ` 連絡方法：${contactValue}。`;
}
result.textContent = message;
});
</script>
</body>
</html>
ここには、Day18.5 前半で押さえたい要素が全部入っています。
チェックボックスの checked
ラジオボタンの checked と value
複数 input から状態を集めて、1つのメッセージにまとめる
Day18.5 前半のまとめ
前半では、テキスト入力とは違うタイプのフォーム要素として、
チェックボックス：オン・オフ、複数選択可、checked を見る
ラジオボタン：グループから 1 つだけ、checked なものの value を読む
という感覚をつかみました。
後半では、
これらを「入力チェック」や「複雑なフォーム処理」と組み合わせて、
より実戦的なフォームを作っていきます。