• 基本的なチェックボックスの作成
• ラベルとチェックボックスの関連付け
• デフォルトでチェックを入れる
• 複数のチェックボックスをグループ化
• チェックボックスを無効化
• JavaScriptでチェックボックスを操作する
• フォームでチェックボックスの値を送信

基本的なチェックボックスの作成

チェックボックスを作成するには、HTMLの<input>要素を使用します。type="checkbox" を指定することでチェックボックスが作成されます。

<input type="checkbox">

このコードを実行すると、単純なチェックボックスが表示されます。

ラベルとチェックボックスの関連付け

<label>要素を使用すると、チェックボックスとラベルを関連付けることができます。

<label>
    <input type="checkbox"> 選択してください
</label>

また、for属性を使用してチェックボックスを識別することもできます。

<input type="checkbox" id="option1">
<label for="option1">選択してください</label>

この方法を使うと、ラベルをクリックしてもチェックボックスが切り替わります。

デフォルトでチェックを入れる

デフォルトでチェックを入れた状態にするには、checked 属性を追加します。

<input type="checkbox" checked>

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

複数のチェックボックスをグループとして扱うには、同じ名前（name 属性）を付けます。

<input type="checkbox" name="fruit" value="apple"> りんご
<input type="checkbox" name="fruit" value="banana"> バナナ
<input type="checkbox" name="fruit" value="cherry"> さくらんぼ

チェックボックスを無効化

ユーザーが操作できないチェックボックスを作成するには、disabled 属性を追加します。

<input type="checkbox" disabled> 操作できません

JavaScriptでチェックボックスを操作する

JavaScriptを使ってチェックボックスの状態を変更したり取得したりすることができます。

例えば、ボタンを押してチェックボックスをオンにするには、以下のようなコードを使用します。

<input type="checkbox" id="myCheckbox">
<button onclick="document.getElementById('myCheckbox').checked = true;">チェックを入れる</button>

フォームでチェックボックスの値を送信

チェックボックスをフォームの一部として使用すると、選択された項目の値を送信できます。

<form method="post">
    <input type="checkbox" name="subscribe" value="yes"> メールを受け取る
    <button type="submit">送信</button>
</form>

このフォームでは、チェックボックスにチェックが入っている場合のみ、subscribe=yes のデータが送信されます。