HTMLラジオボタンに初期値を設定する

HTMLのラジオボタンには初期値を設定する必要があります。 初期値を設定するためには、 選択状態にしたいinput要素にchecked属性を記述します。 こうすることで同一グループ内のラジオボタンが1つ選択状態になります。

次のサンプルコードは、value属性の値が"bread"のラジオボタンに checked属性を追加して初期値を設定しています。

<input type="radio" name="food" value="bread" checked>パン
<input type="radio" name="food" value="rice">米

表示結果

パン

ラジオボタンで初期値を設定するためのchecked属性はブール属性とも言い、 属性値が無く、 タグ内に含まれているかどうかだけでオンとオフが切り替わります。

ちなみに「checked」の部分は「checked="checked"」 と記述しても機能しますが、 シンプルな書き方「checked」で記述する方がおすすめです。

HTML・CSS入門