本記事では、HTMLで表示させたチェックボックスを選択された状態にする方法について解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
HTML/CSSの学習におすすめ参考書
1冊ですべて身につくHTML&CSSとWebデザイン入門講座
チェックボックスを選択状態にする
ページを読み込んだ際、チェックボックスのデフォルト設定では未選択の状態からスタートします。これを意図的に選択されている状態からスタートするには<input>タグの属性にcheckedをセットします。
<input type="checkbox" checked>
checked属性をセットした状態で、チェックボックスが選択されている状態から始まるか下記のサンプルコードを使用して確認してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form>
<div>
<label for="box1">チェックボックス1</label>
<input type="checkbox" id="box1" />
</div>
<div>
<label for="box2">チェックボックス2</label>
<input type="checkbox" id="box2" checked />
</div>
</form>
</body>
</html>
1つ目のチェックボックスはchecked属性をセットしていないので、未選択の状態です。2つ目のチェックボックスにはchecked属性をセットしているの選択された状態になっていることが確認出来ました。