CSS・HTML・JavaScriptでチェックボックスを使いこなす完全ガイド

Webフォームに欠かせないUI要素の一つに「チェックボックス」があります。
複数選択ができたり、条件同意に使われたりと、その活用シーンは多岐にわたります。

本記事では、HTMLでの基本的なチェックボックスの実装方法から、CSSでのデザインカスタマイズ、JavaScriptでの状態取得・制御まで、実践的に解説していきます。
これからフォーム作成を始める方にも、デザインや機能を強化したい方にも役立つ内容を目指しています。

チェックボックスの基本：HTMLの記述方法
CSSでチェックボックスのデザインをカスタマイズする
1. 擬似要素とラベルを活用したカスタムデザイン例
JavaScriptでチェックボックスの状態を取得・制御する
1. チェックされているかどうかを確認
2. 複数チェックボックスの値を取得する方法
応用：チェックボックスによるコンテンツの表示・非表示切替
チェックボックスとバリデーションの組み合わせ
まとめ

チェックボックスの基本：HTMLの記述方法

チェックボックスは、HTMLの<input>タグで実装できます。基本的な構文は以下のとおりです。

<label>
  <input type="checkbox" name="agree" value="yes">
  利用規約に同意する
</label>

ポイントは以下の3点です。

type="checkbox" でチェックボックスを指定
name 属性でサーバー送信時のキーを設定
value 属性でチェック時に送信する値を定義

複数の選択肢を持たせたいときは、nameを同じにして、valueを変えることで対応可能です。

<h3>好きなフルーツを選んでください：</h3>
<label><input type="checkbox" name="fruit" value="apple">りんご</label>
<label><input type="checkbox" name="fruit" value="banana">バナナ</label>
<label><input type="checkbox" name="fruit" value="grape">ぶどう</label>

CSSでチェックボックスのデザインをカスタマイズする

デフォルトのチェックボックスはブラウザによりスタイルが異なります。
CSSで装飾を加えることで、より視覚的に訴求力のあるUIにできます。

擬似要素とラベルを活用したカスタムデザイン例

<label class="custom-checkbox">
  <input type="checkbox" name="newsletter">
  <span class="checkmark"></span>
  メルマガを受け取る
</label>

.custom-checkbox {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  font-size: 16px;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  height: 18px;
  width: 18px;
  background-color: #ccc;
  border-radius: 4px;
}

.custom-checkbox input:checked + .checkmark {
  background-color: #2196F3;
}

.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
}

.custom-checkbox input:checked + .checkmark::after {
  display: block;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

このようにすることで、チェックマークを自由にカスタマイズできます。

JavaScriptでチェックボックスの状態を取得・制御する

JavaScriptを使えば、チェック状態の取得や動的な制御が可能です。

チェックされているかどうかを確認

<input type="checkbox" id="check1">同意する
<button onclick="checkStatus()">状態確認</button>
<p id="result"></p>

<script>
function checkStatus() {
  const checkbox = document.getElementById("check1");
  const result = document.getElementById("result");

  if (checkbox.checked) {
    result.textContent = "チェックされています。";
  } else {
    result.textContent = "チェックされていません。";
  }
}
</script>

複数チェックボックスの値を取得する方法

<form id="fruitForm">
  <label><input type="checkbox" name="fruit" value="apple">りんご</label>
  <label><input type="checkbox" name="fruit" value="banana">バナナ</label>
  <label><input type="checkbox" name="fruit" value="grape">ぶどう</label>
  <button type="button" onclick="getCheckedValues()">送信</button>
</form>

<p id="output"></p>

<script>
function getCheckedValues() {
  const checked = document.querySelectorAll('input[name="fruit"]:checked');
  const values = Array.from(checked).map(el => el.value);
  document.getElementById("output").textContent = `選ばれた果物: ${values.join(", ")}`;
}
</script>

このようにして複数のチェックされた値を配列で取得し、画面に表示することが可能です。

応用：チェックボックスによるコンテンツの表示・非表示切替

チェックボックスを使って、特定の要素を表示・非表示にすることもできます。

<label><input type="checkbox" id="toggleContent">詳細を表示する</label>

<div id="detail" style="display:none;">
  <p>これは詳細情報です。</p>
</div>

<script>
document.getElementById("toggleContent").addEventListener("change", function () {
  const detail = document.getElementById("detail");
  detail.style.display = this.checked ? "block" : "none";
});
</script>

チェックボックスとバリデーションの組み合わせ

フォーム送信時に「チェックが入っていること」を必須条件にしたい場合、JavaScriptでのバリデーションが有効です。

<form onsubmit="return validateCheck()">
  <label><input type="checkbox" id="consent">利用規約に同意する</label><br>
  <button type="submit">送信</button>
</form>

<script>
function validateCheck() {
  const consent = document.getElementById("consent");
  if (!consent.checked) {
    alert("利用規約に同意してください。");
    return false;
  }
  return true;
}
</script>