Dokumentacja HTML z przykładami: Checkbox

Q: Jak zrobić checkbox w HTML?

Użyj wewnątrz etykiety: I agree . Dzięki etykiecie tekst też jest klikalny.

Q: Jak sprawić, żeby checkbox był domyślnie zaznaczony?

Dodaj atrybut checked: . Liczy się jego obecność, więc checked="false" nadal zaznacza pole. W JavaScripcie ustaw box.checked = true lub false.

Q: Jak odczytać wartość checkboxa w JavaScripcie?

Odczytaj box.checked, które ma wartość true lub false. box.value to wartość, którą pole by wysłało, i nie zmienia się niezależnie od tego, czy pole jest zaznaczone. Aby zareagować na przełączenie, nasłuchuj zdarzenia change.

Q: Jak zmienić kolor checkboxa?

Ustaw na nim accent-color: input[type=checkbox] { accent-color: #16a34a; }. Aby uzyskać całkowicie własny wygląd, ustaw appearance: none i narysuj pole oraz znacznik zaznaczenia samodzielnie w CSS.

Jak zrobić checkbox w HTML

Checkbox to <input type="checkbox">. Umieść go w <label> razem z tekstem, żeby kliknięcie tekstu też go przełączało. Zaznacz jedno lub oba pola i naciśnij Save, żeby zobaczyć, co wysyła formularz:

<!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>

W stanie domyślnym formularz wysyła tylko updates=on. Wyjaśniają to dwie zasady:

Zaznaczone pole wysyła name=value. Drugie pole nie ma value, więc wysyła wartość domyślną, on.
Niezaznaczone pole nie wysyła nic. Ani newsletter=no, ani pustej wartości: tej nazwy po prostu nie ma w danych.

checked w HTML ustawia stan początkowy. Jak w każdym atrybucie logicznym liczy się jego obecność: checked="false" nadal zaznacza pole.

Atrybuty checkboxa

Atrybut	Działanie
`name`	Klucz wysyłany, gdy pole jest zaznaczone
`value`	To, co jest wysyłane, gdy pole jest zaznaczone (domyślnie `on`)
`checked`	Zaznaczone po załadowaniu strony
`required`	Formularz nie zostanie wysłany, dopóki to pole nie będzie zaznaczone
`disabled`	Nie da się go przełączyć i nie jest wysyłane

Grupa checkboxów

Dla wyboru "zaznacz dowolne z tych" nadaj każdemu polu tę samą name i inną value. Otocz je <fieldset> z <legend>, żeby grupa miała nazwę:

<!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>

Formularz wysyła topic=html i topic=css: tę samą nazwę dwa razy. Większość frameworków serwerowych potrafi odczytać to jako listę. Wyjątkiem jest PHP: zachowuje tylko ostatnią wartość, chyba że nazwa kończy się nawiasami, name="topic[]". W JavaScripcie new FormData(form).getAll('topic') zwraca ['html', 'css'].

Wysyłanie wartości, gdy pole nie jest zaznaczone

Gdy serwer potrzebuje jawnego "nie", umieść przed checkboxem ukryte pole o tej samej nazwie. Gdy checkbox nie jest zaznaczony, wysyłana jest tylko ukryta wartość; gdy jest, wysyłane są obie, a serwer bierze ostatnią:

<!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>

Naciśnij Continue: formularz odmówi, dopóki pole z regulaminem nie zostanie zaznaczone, bo jest required. Potem wyśle marketing=no i terms=accepted albo, przy zaznaczonym pierwszym polu, marketing=no, marketing=yes i terms=accepted. Frameworki takie jak Rails generują dokładnie taką parę z ukrytym polem. Zanim zaczniesz na tym polegać, sprawdź, jak twój serwer odczytuje powtórzoną nazwę.

Zaznacz wszystko i stan indeterminate

Checkbox ma trzeci wygląd, kreskę, oznaczający "niektóre, ale nie wszystkie". Istnieje tylko w JavaScripcie: ustaw box.indeterminate = true. Pole "zaznacz wszystko" używa go, gdy zaznaczona jest część pól, którymi steruje:

<!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 zmienia tylko wygląd (i to, co ogłaszają czytniki ekranu: "mieszany" lub "częściowo zaznaczony"). Pod spodem pole nadal jest albo zaznaczone, albo nie, i to właśnie wysyła formularz. Kliknięcie pola w stanie indeterminate usuwa kreskę i je przełącza.

Aby reagować na checkbox, używaj zdarzenia change, a jego stan odczytuj z box.checked. box.value nie zmienia się przy przełączaniu pola.

Stylowanie checkboxów

Najszybsza zmiana to accent-color, która zmienia kolor natywnego checkboxa i zachowuje całe jego działanie. Aby uzyskać zupełnie inny wygląd, appearance: none usuwa natywne rysowanie i pozwala stylizować pole jak każde pudełko:

<!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>

Własne pole to nadal prawdziwy checkbox: przełącza się kliknięciem i Spacją, jest wysyłane z formularzem i ogłaszane jako checkbox. Narysuj je przez :checked i zachowaj styl :focus-visible, bo bez natywnego rysowania nie ma ramki fokusu, której sam nie dodasz.

Przełącznik

Przełącznik to checkbox, który oznacza "włączone/wyłączone teraz", a nie "uwzględnij to". Narysuj go przez appearance: none i dodaj role="switch", żeby czytniki ekranu ogłaszały przełącznik włączony lub wyłączony zamiast zaznaczonego checkboxa:

<!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 ustawia gałkę od początku linii, więc na stronach pisanych od prawej do lewej przełącznik przesuwa się w drugą stronę, tak jak powinien. Przy grupach wyborów tak/nie, gdzie można wybrać tylko jedną opcję, zajrzyj na stronę przyciski radio w HTML.

Częste błędy

Oczekiwanie false dla niezaznaczonego pola. Nic nie jest wysyłane. Traktuj brakującą nazwę na serwerze jako "wyłączone" albo dodaj ukryte pole.
checked="false". Nadal zaznacza pole. Usuń atrybut.
Checkbox bez etykiety albo z tekstem obok, który nie jest <label>. Jedynym celem kliknięcia staje się małe pole, a czytniki ekranu ogłaszają "checkbox" bez nazwy. Zobacz etykiety w HTML.
Brak value, przez co każde pole w grupie wysyła on i serwer nie potrafi ich odróżnić.
Odczytywanie box.value, żeby sprawdzić zaznaczenie. Użyj box.checked.
Checkboxy do "wybierz jedno". Do tego służą przyciski radio.

Najczęściej zadawane pytania

Jak zrobić checkbox w HTML?

Użyj <input type="checkbox"> wewnątrz etykiety: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. Dzięki etykiecie tekst też jest klikalny.

Jak sprawić, żeby checkbox był domyślnie zaznaczony?

Dodaj atrybut checked: <input type="checkbox" name="news" checked>. Liczy się jego obecność, więc checked="false" nadal zaznacza pole. W JavaScripcie ustaw box.checked = true lub false.

Jaką wartość wysyła niezaznaczony checkbox?

Żadnej. Niezaznaczony checkbox jest całkowicie pomijany w wysyłanych danych. Zaznaczony wysyła swoje value albo on, jeśli nie ma value. Jeśli serwer potrzebuje jawnego "nie", umieść przed checkboxem ukryte pole o tej samej nazwie.

Jak odczytać wartość checkboxa w JavaScripcie?

Odczytaj box.checked, które ma wartość true lub false. box.value to wartość, którą pole by wysłało, i nie zmienia się niezależnie od tego, czy pole jest zaznaczone. Aby zareagować na przełączenie, nasłuchuj zdarzenia change.

Jak zmienić kolor checkboxa?

Ustaw na nim accent-color: input[type=checkbox] { accent-color: #16a34a; }. Aby uzyskać całkowicie własny wygląd, ustaw appearance: none i narysuj pole oraz znacznik zaznaczenia samodzielnie w CSS.

Powiązane zagadnienia