実行できるHTMLドキュメント: チェックボックス

Q: HTML でチェックボックスを作るにはどうすればいいですか？

ラベルの中に を置きます: I agree 。ラベルがあるとテキストもクリックできるようになります。

Q: チェックボックスを最初からチェックされた状態にするには？

checked 属性を付けます: 。属性があるかどうかで決まるので、checked="false" でもチェックされます。JavaScript では box.checked = true または false を設定します。

Q: チェックされていないチェックボックスはどんな値を送りますか？

何も送りません。チェックされていないチェックボックスは送信データから丸ごと省かれます。チェックされたものは value を、value がなければ on を送ります。サーバーが明示的な「いいえ」を必要とするなら、同じ name の hidden の input をチェックボックスの前に置きます。

Q: JavaScript でチェックボックスの値を取得するには？

box.checked を読みます。値は true か false です。box.value は送信される値で、チェックの有無にかかわらず変わりません。切り替えに反応するには change イベントを受け取ります。

Q: チェックボックスの色を変えるには？

accent-color を指定します: input[type=checkbox] { accent-color: #16a34a; }。見た目を完全に変えたいなら、appearance: none を指定して、箱とチェックマークを CSS で自分で描きます。

HTML でチェックボックスを作る方法

チェックボックスは <input type="checkbox"> です。テキストと一緒に <label> の中に入れると、テキストをクリックしても切り替わります。片方または両方にチェックを入れて Save を押すと、フォームが送る内容が表示されます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

初期状態では、フォームは updates=on だけを送ります。これは 2 つのルールで説明できます。

チェックされた箱は name=value を送ります。 2 つ目の箱には value がないので、初期値の on を送ります。
チェックされていない箱は何も送りません。 newsletter=no でも空の値でもなく、データから name ごと消えます。

HTML の checked は最初の状態を決めます。ほかの真偽値属性と同じく、属性があるかどうかで決まるので、checked="false" でも箱はチェックされます。

チェックボックスの属性

属性	働き
`name`	チェックされたときに送るキー
`value`	チェックされたときに送る値 (初期値は `on`)
`checked`	ページの読み込み時にチェックされている
`required`	この箱がチェックされるまでフォームを送信できない
`disabled`	切り替えられず、送信もされない

チェックボックスのグループ

「この中から好きなだけ選ぶ」ときは、すべての箱に同じ name と別々の value を付けます。グループに名前が付くよう、<legend> と一緒に <fieldset> で囲みましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

フォームは topic=html と topic=css を送ります。同じ name が 2 回です。ほとんどのサーバーのフレームワークは、これをリストとして読めます。例外は PHP で、name の末尾に角かっこを付けて name="topic[]" としない限り、最後の 1 つしか残りません。JavaScript では new FormData(form).getAll('topic') が ['html', 'css'] を返します。

チェックされていないときにも値を送る

サーバーが明示的な「いいえ」を必要とするなら、同じ name の hidden の input をチェックボックスの前に置きます。チェックされていなければ hidden の値だけが送られ、チェックされていれば両方が送られてサーバーは最後の値を使います。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Continue を押してみてください。利用規約の箱は required なので、チェックされるまでフォームは送信を拒否します。その後、marketing=no と terms=accepted を、最初の箱もチェックしていれば marketing=no、marketing=yes、terms=accepted を送ります。Rails などのフレームワークは、まさにこの hidden の input との組を生成します。これに頼る前に、同じ name が繰り返されたときサーバーがどう読むかを確認しましょう。

全選択と indeterminate の状態

チェックボックスには「一部だけ選択」を表す 3 つ目の見た目、横線があります。これは JavaScript でしか設定できません: box.indeterminate = true。「すべて選択」の箱は、自分が管理する箱の一部だけがチェックされているときにこれを使います。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate が変えるのは見た目 (とスクリーンリーダーの読み上げ: 「mixed」や「一部チェック」) だけです。内部では箱はチェックされているか、されていないかのどちらかで、フォームが送るのはその状態です。indeterminate の箱をクリックすると横線が消え、チェックが切り替わります。

チェックボックスの変化に反応するには change イベントを使い、状態は box.checked で読みます。box.value は切り替えても変わりません。

チェックボックスのデザイン

いちばん手軽なのは accent-color で、ブラウザ標準のチェックボックスの動作をすべて残したまま色を変えます。見た目をまったく変えたいなら、appearance: none で標準の描画を消し、普通の箱と同じように input にスタイルを付けます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

独自デザインの箱も本物のチェックボックスのままです。クリックやスペースキーで切り替わり、フォームと一緒に送信され、チェックボックスとして読み上げられます。:checked で見た目を描き、:focus-visible のスタイルも残しましょう。標準の描画がないので、自分で追加しない限りフォーカスリングはありません。

トグルスイッチ

スイッチは、「これを含める」ではなく「今オンかオフか」を意味するチェックボックスです。appearance: none で描き、role="switch" を付けると、スクリーンリーダーはチェックされたチェックボックスではなく、オンまたはオフのスイッチとして読み上げます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start はつまみを行の始まりから配置するので、右から左に書くページではスイッチが正しく逆向きにスライドします。1 つしか選べないはい/いいえの選択肢のグループについては HTML のラジオボタンを参照してください。

よくある間違い

チェックされていない箱が false を送ると思う。 何も送られません。サーバーで name がないことを「オフ」として扱うか、hidden の input を追加しましょう。
checked="false" と書く。 それでもチェックされます。属性を外しましょう。
ラベルのないチェックボックス、または横のテキストが <label> になっていない。 小さな箱だけがクリックできる場所になり、スクリーンリーダーは名前のない「チェックボックス」と読み上げます。HTML の label を参照してください。
value を忘れる。 グループのすべての箱が on を送り、サーバーが区別できなくなります。
チェックされているかを box.value で確かめる。 box.checked を使いましょう。
「1 つだけ選ぶ」ためにチェックボックスを使う。 それはラジオボタンの役割です。

よくある質問

HTML でチェックボックスを作るにはどうすればいいですか？

ラベルの中に <input type="checkbox"> を置きます: <label><input type="checkbox" name="terms" value="yes"> I agree</label>。ラベルがあるとテキストもクリックできるようになります。

チェックボックスを最初からチェックされた状態にするには？

checked 属性を付けます: <input type="checkbox" name="news" checked>。属性があるかどうかで決まるので、checked="false" でもチェックされます。JavaScript では box.checked = true または false を設定します。

チェックされていないチェックボックスはどんな値を送りますか？

何も送りません。チェックされていないチェックボックスは送信データから丸ごと省かれます。チェックされたものは value を、value がなければ on を送ります。サーバーが明示的な「いいえ」を必要とするなら、同じ name の hidden の input をチェックボックスの前に置きます。

JavaScript でチェックボックスの値を取得するには？

box.checked を読みます。値は true か false です。box.value は送信される値で、チェックの有無にかかわらず変わりません。切り替えに反応するには change イベントを受け取ります。

チェックボックスの色を変えるには？

accent-color を指定します: input[type=checkbox] { accent-color: #16a34a; }。見た目を完全に変えたいなら、appearance: none を指定して、箱とチェックマークを CSS で自分で描きます。