【HTML】checkedで初期値を指定する方法とは？使える要素を紹介

そんなお悩みはありませんか？

今回の記事では、checked属性の使い方について解説していきます。

Webページに選択肢を置く場合に、知っておいた方が良い知識ですので、ここでマスターしてしまいましょう。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

checked属性とは？どこで利用されるのか

checked属性は、input要素のチェックボックスとラジオボタンで使われます。

このchecked属性がついていることで、そのWebページを開いたときに選択肢がチェックされている状態になります。

ページが読み込まれたときの状態を示すもので、チェックを外したとしても属性に変化があるわけではありません。

記述の仕方は「checked」、「checked=”checked”」、「checked=””」 のいずれかになります。

値を空にしても、checkedは指定されていることに気をつけましょう。

ここでは以下の2つの要素でcheckedがどのように使われるのか解説していきます。

似たような要素で、option要素がありますが、こちらでは選択肢の初期値をselected属性で指定します。

今回の記事とは異なるため、注意が必要ですね。

チェックボックスでの使い方

input要素のtype属性を「type=”checkbox”」とするとチェックボックスになります。

<p>希望する曜日</p>
<input id="monday" type="checkbox" value="monday" checked><label for="monday">月曜日</label>
<input id="tuesday" type="checkbox" value="tuesday"><label for="tuesday">火曜日</label>
<input id="wednesday" type="checkbox" value="wednesday" checked><label for="wednesday">水曜日</label>
<input id="thursday" type="checkbox" value="thursday"><label for="thursday">木曜日</label>
<input id="friday" type="checkbox" value="friday"><label for="friday">金曜日</label>

チェックボックスは複数の選択肢を選べるため、checkedも複数指定できます。

上記のコードでは、初期値として月曜日と水曜日にチェックが入っています。

ラジオボタンでの使い方

input要素で「type=”radio”」とするとラジオボタンになります。

<p>好きな季節</p>
<input id="spring" type="radio" value="spring"><label for="spring">春</label>
<input id="summer" type="radio" value="summer"><label for="summer">夏</label>
<input id="autumn" type="radio" value="autumn" checked><label for="autumn">秋</label>
<input id="winter" type="radio" value="winter"><label for="winter">冬</label>

ラジオボタンは複数の選択肢から1つだけを選ぶので、初期値も1つしか指定できません。

上記のコードでは、初期値として秋が選択されています。

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！

＼プログラミングを学んで／
人生を変えた3名

インタビュー記事一覧 ＞

まとめ：checked属性はinput要素の選択肢で使われる

今回は、checked属性の使い方について解説しました。

HTMLでchecked属性を使用する場面は、チェックボックスとラジオボックスでしたね。

Webページを読み込んだときの状態を指定できるので、覚えておけば様々なことに活用できそうです。

この記事が、checked属性を使う上で参考になれば幸いです。

知っていますか？IT業界は市場価値が高まっています！市場価値の高い業界で働くことで、現在より年収UPが可能です。

また、 ITスキルを身につけることで、どの業界でも必要とされる人材に成長できます！

【DMM WEBCAMP】のプログラミングスクールでは、未経験から最短3ヶ月でエンジニアとして転職が可能です。

DMM WEBCAMPでは転職成功率９８％の転職コースを複数提供しています

✔︎︎︎企業が本当に求めるビジネススキルを優先的に取得可能！

✔︎︎︎︎キャリアカウンセラーとメンターがあなたの転職活動とスキル獲得を両面サポート‼

✔︎︎︎紹介可能企業は６００社以上！？

IT業界に転職したい方はぜひご覧ください！

「なんか今の仕事合わないな・・・」

「IT業界に転職してみたいなぁ・・・」

という方、DMMが運営する「WEBCAMP エンジニア転職」をご検討してみてはいかがですか？

「WEBCAMP エンジニア転職」では最短12週間でITエンジニアを目指すことが可能です！

WEBCAMPの卒業生は転職後に年収もUP！（例：年収250万円→500万円）

しかも今なら受講料の最大70%が給付金として支給されます。

DMM WEBCAMPは経済産業省・厚生労働省が認定した専門実践教育訓練給付金制度の対象です

DMM WEBCAMPについてもっと詳しく