HTMLチェックボックス入門！完全解説＆カスタマイズ法5選

はじめに
【HTMLチェックボックスとは】
【チェックボックスの基本的な作成方法】
【チェックボックスの使い方】
【チェックボックスの対処法】
【チェックボックスの注意点】
【チェックボックスのカスタマイズ方法】
【応用例とサンプルコード】
まとめ

はじめに

この記事を読めば、HTMLチェックボックスの作成・使い方・カスタマイズができるようになります！

【HTMLチェックボックスとは】

HTMLチェックボックスは、ウェブページ上でユーザーが選択肢を複数選ぶことができるフォーム要素です。

アンケートや意見集約など、さまざまな場面で活用されています。

【チェックボックスの基本的な作成方法】

チェックボックスを作成するには、<input>タグを使用します。

type属性に”checkbox”を指定することでチェックボックスが作成されます。

<label>
  <input type="checkbox" name="option1" value="option1">
  オプション1
</label>
<label>
  <input type="checkbox" name="option2" value="option2">
  オプション2
</label>

【チェックボックスの使い方】

チェックボックスを使用する際は、<form>タグで囲むことが一般的です。

これにより、選択した情報をサーバーに送信できます。

<form action="/submit" method="POST">
  <label>
    <input type="checkbox" name="option1" value="option1">
    オプション1
  </label>
  <label>
    <input type="checkbox" name="option2" value="option2">
   オプション2
</label>
<input type="submit" value="送信">
</form>

【チェックボックスの対処法】

チェックボックスが選択されていない場合、何も送信されません。

そのため、サーバー側で適切に処理する必要があります。

// サーバー側(PHP)での対処法例
$options = isset($_POST['options']) ? $_POST['options'] : array();
foreach ($options as $option) {
  // 選択されたオプションの処理
}

【チェックボックスの注意点】

チェックボックスの属性で、特に注意すべき点は「name」属性です。

複数のチェックボックスが同じグループに属する場合は、同じ「name」属性値を持たせることが重要です。

【チェックボックスのカスタマイズ方法】

チェックボックスをカスタマイズするには、CSSを使用します。

ここでは、いくつかのカスタマイズ方法を紹介します。

チェックボックスのサイズ変更
チェックボックスの背景色変更
チェックボックスの枠線変更
チェックボックスのマージン変更

<style>
  input[type="checkbox"] {
    /* サイズ変更 */
    width: 25px;
    height: 25px;
    /* 背景色変更 */
    background-color: lightblue;
    /* 枠線変更 */
    border: 2px solid darkblue;
    /* マージン変更 */
    margin: 10px;
  }
</style>

【応用例とサンプルコード】

チェックボックスを活用した応用例として、下記のようなケースが考えられます。

全選択・全解除ボタンの実装
選択肢の動的追加・削除

<!-- 全選択・全解除ボタンの実装 -->
<script>
  function toggleCheckboxes(checked) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = checked;
    }
  }
</script>
<button onclick="toggleCheckboxes(true)">全選択</button>
<button onclick="toggleCheckboxes(false)">全解除</button>

<!-- 選択肢の動的追加・削除 -->
<script>
  function addOption() {
    var optionList = document.getElementById('optionList');
    var option = document.createElement('li');
    var checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.name = 'option';
    option.appendChild(checkbox);
    optionList.appendChild(option);
  }

  function removeOption() {
    var optionList = document.getElementById('optionList');
    if (optionList.childElementCount > 0) {
      optionList.removeChild(optionList.lastElementChild);
    }
  }
</script>
<button onclick="addOption()">選択肢追加</button>
<button onclick="removeOption()">選択肢削除</button>
<ul id="optionList"></ul>