サーバーサイドのコードでHTMLチェックボックスの初期状態を設定する

2024-04-12

HTMLチェックボックスのchecked属性の値について

checked属性の役割

checked 属性は、チェックボックスが初期状態で選択されているかどうかを指定します。この属性は ブール属性 であり、値は次の2つのみです。

存在する: チェックボックスが初期状態で選択されています。

つまり、checked 属性が存在する場合、チェックボックスは初期状態で選択されます。逆に、checked 属性が存在しない場合は、チェックボックスは初期状態で選択されません。

コード例

以下のコード例は、checked 属性を使用して、初期状態で選択されたチェックボックスを作成する方法を示しています。

<input type="checkbox" name="topping" value="pepperoni" checked> ペパロニ
<input type="checkbox" name="topping" value="sausage"> ソーセージ
<input type="checkbox" name="topping" value="mushrooms"> マッシュルーム

このコードでは、最初のチェックボックス (ペパロニ) は checked 属性が設定されているため、初期状態で選択されます。他の2つのチェックボックスは checked 属性が設定されていないため、初期状態で選択されません。

その他の注意点

checked 属性は、JavaScriptを使用して動的に設定することもできます。
checked 属性と disabled 属性を同時に設定することはできません。

まとめ

checked 属性は、HTMLチェックボックスの初期状態を制御するために使用されます。この属性はブール属性であり、値は存在または 存在しない の2つのみです。

checked 属性を理解することで、ユーザーが初期状態で選択した状態でチェックボックスを表示することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTMLチェックボックスのchecked属性</title>
</head>
<body>
  <h1>好きなトッピングを選んでください</h1>
  <form action="/submit_form.php" method="post">
    <input type="checkbox" name="topping" value="pepperoni" checked> ペパロニ
    <input type="checkbox" name="topping" value="sausage"> ソーセージ
    <input type="checkbox" name="topping" value="mushrooms"> マッシュルーム
    <br>
    <input type="submit" value="送信">
  </form>
</body>
</html>

このコードでは、以下の内容を実現しています。

<h1> タグを使用して、ページの見出しを表示しています。
<form> タグを使用して、フォームを作成しています。
action 属性を使用して、フォーム送信時の送信先URLを指定しています。
input タグを使用して、チェックボックスを作成しています。

このコードを実行すると、以下の画面が表示されます。

この画面で、ユーザーは好きなトッピングを選択して送信ボタンをクリックすることができます。

複数のチェックボックスをグループ化する:

<input type="checkbox" name="topping" value="pepperoni" checked> ペパロニ
<input type="checkbox" name="topping" value="sausage"> ソーセージ
<input type="checkbox" name="topping" value="mushrooms"> マッシュルーム
<br>
<input type="checkbox" name="drink" value="cola"> コーラ
<input type="checkbox" name="drink" value="juice"> ジュース

JavaScriptを使用して、checked属性を動的に設定する:

<script>
function selectTopping() {
  var checkbox = document.getElementById("pepperoni");
  checkbox.checked = true;
}
</script>

<input type="checkbox" id="pepperoni" name="topping"> ペパロニ
<button onclick="selectTopping()">ペパロニを選択</button>

HTMLチェックボックスの初期状態を設定する他の方法

<script>
function selectTopping() {
  var checkbox = document.getElementById("pepperoni");
  checkbox.checked = true;
}
</script>

<input type="checkbox" id="pepperoni" name="topping"> ペパロニ
<button onclick="selectTopping()">ペパロニを選択</button>

このコードでは、selectTopping() 関数を呼び出すことで、pepperoni チェックボックスを初期状態で選択しています。

CSSを使用して、チェックボックスの初期状態をスタイル設定することができます。

<input type="checkbox" id="pepperoni" name="topping"> ペパロニ

<style>
#pepperoni:checked {
  background-color: red;
}
</style>

このコードでは、pepperoni チェックボックスが初期状態で選択されている場合、背景色を赤色に設定しています。

<?php
$checked = true;

if (isset($_POST["topping"])) {
  $checked = $_POST["topping"] === "pepperoni";
}
?>

<input type="checkbox" name="topping" value="pepperoni" <?php echo $checked ? "checked" : ""; ?>> ペパロニ