Checkbox HTML: Checked, Value, Grup dan Gaya Sendiri

Cara membuat checkbox di HTML

Checkbox adalah <input type="checkbox">. Taruh di dalam <label> bersama teksnya, supaya mengklik teks juga mengubah checkbox. Centang satu atau kedua kotak lalu tekan Save untuk melihat apa yang dikirim form:

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

Dengan keadaan default-nya, form hanya mengirim updates=on. Dua aturan menjelaskannya:

• Kotak yang dicentang mengirim name=value. Kotak kedua tidak punya value, jadi ia mengirim nilai default, on.
• Kotak yang tidak dicentang tidak mengirim apa pun. Bukan newsletter=no, bukan nilai kosong: name-nya tidak ada di data.

checked di HTML menentukan keadaan awalnya. Seperti semua atribut boolean, yang dihitung adalah keberadaannya: checked="false" tetap mencentang kotaknya.

Atribut checkbox

Grup checkbox

Untuk "pilih mana saja dari ini", beri setiap kotak name yang sama dan value yang berbeda. Bungkus dengan <fieldset> dan <legend> supaya grupnya punya nama:

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

Form mengirim topic=html dan topic=css: name yang sama dua kali. Kebanyakan framework server bisa membacanya sebagai list. PHP adalah pengecualiannya: PHP hanya menyimpan yang terakhir kecuali name-nya diakhiri tanda kurung siku, name="topic[]". Di JavaScript, new FormData(form).getAll('topic') mengembalikan ['html', 'css'].

Mengirim nilai saat kotak tidak dicentang

Saat server butuh "no" yang eksplisit, taruh input hidden dengan name yang sama sebelum checkbox. Saat tidak dicentang, hanya nilai hidden yang dikirim; saat dicentang, keduanya dikirim dan server mengambil yang terakhir:

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

Tekan Continue: form menolak sampai kotak persetujuan dicentang, karena kotak itu required. Lalu form mengirim marketing=no dan terms=accepted, atau marketing=no, marketing=yes dan terms=accepted kalau kotak pertama dicentang. Framework seperti Rails membuat pasangan input hidden persis seperti ini. Periksa cara server-mu membaca name yang berulang sebelum mengandalkannya.

Pilih semua dan status indeterminate

Checkbox punya tampilan ketiga, sebuah garis, untuk "sebagian tapi tidak semua". Tampilan ini hanya ada di JavaScript: atur box.indeterminate = true. Kotak "pilih semua" memakainya saat sebagian kotak yang dikendalikannya sudah dicentang:

<!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 hanya mengubah tampilan (dan apa yang diumumkan screen reader: "mixed" atau "partially checked"). Di baliknya, kotak itu tetap dicentang atau tidak dicentang, dan itulah yang dikirim form. Mengklik kotak indeterminate menghapus garisnya dan mengubah keadaannya.

Pakai event change untuk bereaksi pada checkbox, dan baca box.checked untuk keadaannya. box.value tidak berubah saat kotaknya diubah.

Memberi gaya checkbox

Perubahan tercepat adalah accent-color, yang mewarnai ulang checkbox bawaan dan mempertahankan semua perilakunya. Untuk tampilan yang sama sekali berbeda, appearance: none menghapus gambar bawaannya dan membuat kamu bisa memberi gaya input itu seperti kotak lainnya:

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

Kotak buatan sendiri itu tetap checkbox sungguhan: berubah saat diklik dan saat Space ditekan, dikirim bersama form, dan diumumkan sebagai checkbox. Gambar keadaannya dengan :checked dan pertahankan gaya :focus-visible, karena tanpa gambar bawaan tidak ada cincin fokus kecuali yang kamu tambahkan sendiri.

Toggle switch

Switch adalah checkbox yang berarti "nyala/mati sekarang", bukan "sertakan ini". Gambar dengan appearance: none dan tambahkan role="switch" supaya screen reader mengumumkan switch yang nyala atau mati, bukan checkbox yang dicentang:

<!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 menaruh tombol bulatnya dari awal baris, jadi switch bergeser ke arah sebaliknya di halaman yang ditulis dari kanan ke kiri, sebagaimana mestinya. Untuk pilihan ya/tidak berkelompok yang hanya boleh dipilih satu, lihat radio button HTML.

Kesalahan umum

• Berharap false untuk kotak yang tidak dicentang. Tidak ada yang dikirim. Tangani name yang tidak ada sebagai "mati" di server, atau tambahkan input hidden.
• checked="false". Kotaknya tetap tercentang. Hapus atributnya.
• Checkbox tanpa label, atau dengan teks di sampingnya yang bukan <label>. Kotak kecil itu menjadi satu-satunya target klik dan screen reader mengumumkan "checkbox" tanpa nama. Lihat label HTML.
• Lupa menulis value, sehingga setiap kotak dalam grup mengirim on dan server tidak bisa membedakannya.
• Membaca box.value untuk melihat apakah kotaknya dicentang. Pakai box.checked.
• Checkbox untuk "pilih satu". Itulah gunanya radio button.