チェックボックスやラジオボタンに元からチェックがついている状態にする方法を知っていますか。
この記事ではinputタグのchecked属性を使って、チェックボックスやラジオボタンに元からチェックがついている状態にする方法を解説していきます。
Contents
前提：checked属性とは元からチェックをついた状態にする属性
ここまでの話で理解しているところもあると思いますが、checked属性とはinputタグのtype属性の1つで、チェックボックスやラジオボタンに元からチェックをついた状態にする属性です。
答えがほとんど決まっているようなアンケート等の場合はこの元からチェックをついた状態にする方法が役に立つ機会があります。
それではここからchecked属性の具体的な使い方について詳しく解説していきます。
準備：チェックボックスとラジオボタンはtype属性で指定する
まずはchecked属性を指定するためにチェックボックス、またはラジオボタンを準備する必要があります。
下記のコードを見てください。
<input type="checkbox" name="sports" value="soccer">サッカー
<input type="checkbox" name="sports" value="baseball">野球
inputタグのtype属性であるcheckboxを使用して2つのチェックボックスを作りました。
チェックボックスやラジオボタンは簡単に解説すると、type属性の属性値をそれぞれ『checkbox』、または『radio』にすることで作ることが出来ます。
チェックボックスやラジオボタンにそれぞれどのような特徴があるのかなど詳しい解説は下記にまとめた記事で詳しく解説していますので、参考にしてみてください。
今回は上記の画像の2つの選択肢のうち、『サッカー』の方にだけ元からチェックを付けた状態にする方法を解説していきます。
方法：type属性の属性値の後ろに半角スペースを空けて、『checked』を追記する
元からチェックをついた状態にするためには、type属性の属性値の後ろに半角スペースを空けて、『checked』を追記するだけで出来るようなります。
下記のコードを見てください。
<input type="checkbox" checked name="sports" value="soccer">サッカー
<input type="checkbox" name="sports" value="baseball">野球
先述したコードからサッカーの選択肢を作っているinputタグのtype属性の属性値『checkbox』の後ろに『checked』を追記しました。
この『checked』を追記することによって、元からチェックをついた状態にすることが出来ます。
チェックボタンやラジオボタンに元からチェックをついた状態する時にはこの方法を実践してみて下さい。
今回はinputタグのchecked属性とは何なのかということから、checked属性を使ってチェックボックスやラジオボタンに元からチェックがついている状態にする方法について解説していきました。
手順が『checked』を追記するということのみで、元からチェックをついた状態にできるため、手軽に実践できると思います。
使い続けて、自分の知識の1つに定着させてください。
