考えるべきことが多いのでまとめた。
ラジオボタン
HTMLの話。複数ある中から、どれかひとつだけ選びたい。このときラジオボタンを使う。
<input>
ラジオボタンは<input type="radio">というタグで表す。
<input type="radio">
以下のような見た目をしている。
❍
checked属性
クリックすると選択状態になる。checked属性が付与される。checked="true"のようにも表記できる。
⦿
<input ... checked>
<input ... checked="true">
<label>, id属性
ふつう、<label>とあわせて使う。<input>のidと<label>のforを同じ値にすることで紐付けることができる。
❍ 男
⦿ 男
<input type="radio" id="sex_m"> <label for="sex_m">男</label>
name属性
ふつうラジオボタンは２つ以上ある。その中から選ぶ。
あなたの性別は？ ⦿ 男 ❍ 女
<input type="radio" id="sex_m"> <label for="sex_m">男</label> <input type="radio" id="sex_f"> <label for="sex_f">女</label>
このままだと両方とも選べてしまう。
あなたの性別は？ ⦿ 男 ⦿ 女
どちらか一方のみ選ぶためには、同じグループにする必要がある。
おなじグループにするには、name属性値をおなじにすること。
<input type="radio" id="sex_m" name="sex"> <label for="sex_m">男</label> <input type="radio" id="sex_f" name="sex"> <label for="sex_f">女</label>
setAttribute()
選択状態をJavaScriptで指定するなら以下。
document.querySelector('#sex_m').setAttribute('checked', ture);
ふつうはDOM読込が完了した後で設定するので以下。
window.addEventListener('load', (event)=>{ document.querySelector('#sex_m').setAttribute('checked', ture); });
changeイベント
ふつうボタンごとに値を設定する。この値はJS内で使われる。
<input type="radio" id="sex_m" name="sex" value="m"> <label for="sex_m">男</label> <input type="radio" id="sex_f" name="sex" value="f"> <label for="sex_f">女</label>
選択状態が変化するたびにイベントを受け取るなら以下。
document.querySelector(`input[type="radio"]`).addEventListener('change', (event)=>{ console.log(`選んだラジオボタンのvalue値は ${event.currentTarget.value} です。`); });
まとめ
| 要素 | 目的 |
|---|---|
<input> |
ラジオボタン: ❍⦿ |
<label> |
表示するラベル |
| 属性 | 目的 |
|---|---|
id |
文書内における<input>要素を特定する。紐づく<label>を指定する。 |
name |
ラジオボタンのグループを指定する（同グループ内で１つのみ選ぶ） |
checked |
選択中か判別するフラグ（選択中のラジオボタンに付与される） |
value |
JS内で使う。ふつう選択中の値を取得する。その値をJS内で使う。 |
| イベント | 概要 |
|---|---|
change |
選択値が変更されたときに発生する。ふつう選択中ラジオボタンのvalueを取得する |
どうでもいいこと
丸の文字がたくさんあって迷った
○◎● ⚪⚫ ◯ ❍⦿◉ ⭕
フォントによって表示サイズが違う。
