【HTML】checked属性で最初から選択済みのボタンを作る方法

このページについて

このページではHTMLで使う事ができるchecked属性の機能と使い方について解説しています。

checked属性

checkedはページが読み込まれた際に、特定のタグの選択肢を自動で選択した状態にする機能を持ちます。この属性はinputタグの2つのtype(checkboxとradio)で使う事ができますが、それ以外では使う事ができません。

checked属性の書き方

checkedはブール値といって、「書いたら有効、書かなかったら無効」というシンプルな構造をしています。あらかじめ選択済みにしておきたい選択肢に書いておくだけでOKです。

<input type="checkbox" checked />

これで選択済みのチェックボックスの完成です。

実例

3つの選択肢のうち、真ん中のみ選択済みにしたい場合

<label>3ボタン</label><br>
<input type="radio" name="radio1" >
<input type="radio" name="radio1" checked>
<input type="radio" name="radio1" >

これはこうなります。

3ボタン



真ん中が最初から選択済みとなっていますが、他のボタンを押せばそちらが選択状態に切り替わります。

JavaScriptで後から付与

JavaScriptを使って後から付与することもできます。特に意味が感じられないようにも思えますが、これは選択済みを解除する時にも使えたりします。

以下がHTMLのフォームの中身部分です。

<form name="fo1">
<label>ルビー&サファイア</label>
<input type="radio" name="test1" value="ルビサファ"><br>
<label>XY</label>
<input type="radio" name="test1" value="XY"><br>
<label>Sun & Moon</label>
<input type="radio" name="test1" value="SM">
</form>

以下がJavaScriptです。bodyタグ内に書いている書き方ですが、外部ファイルでも読み込めさえすれば使えます。

<script>
document.forms.fo1.test1[0].checked = true;
</script>

行なっていることはシンプルです。documentのformsプロパティを使い、formタグのfo1を指定し、その中にあるtest1を指定し、添字で[0]を指定し、それにchecked = trueでcheckedを付与しているだけです。結果、後付けの属性でも初期状態から選択済みになります。

逆にcheckedを無効化というか解除したい場合は、checked = falseとすればOKです。

まとめ

checkedはinputタグのradioとcheckboxで使う事ができる属性で、最初から選択済みにできる機能を持っています。とはいえユーザーが何を選ぶかは統計を取らないと分からないので安易に初期選択を設定するのはどうかなと思うのでそのあたりはサイトの作りと相談しましょう。

HTMLの基礎

HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。

HTMLタグで押さえておきたいポイント3選

HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。

HTMLタグと属性一覧

HTMLタグと属性の一覧です。

tableタグ生成ページ

tableタグの基本形を生成できるページです。

ulタグ・olタグ生成ページ

ulタグとolタグの基本形を生成できるページです。