Checkbox HTML: checked, value, nhóm checkbox và định dạng

Cách tạo checkbox trong HTML

Checkbox là một <input type="checkbox">. Đặt nó bên trong một <label> cùng với chữ, để nhấp vào chữ cũng bật tắt được ô. Chọn một hoặc cả hai ô rồi nhấn Save để xem form gửi gì:

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

Với trạng thái mặc định, form chỉ gửi updates=on. Hai quy tắc giải thích điều này:

• Ô được chọn gửi name=value. Ô thứ hai không có value, nên nó gửi giá trị mặc định, on.
• Ô không được chọn không gửi gì cả. Không phải newsletter=no, cũng không phải giá trị rỗng: tên của nó vắng mặt trong dữ liệu.

checked trong HTML đặt trạng thái ban đầu. Như mọi thuộc tính boolean, chỉ cần có mặt là đủ: checked="false" vẫn chọn ô.

Thuộc tính của checkbox

Nhóm checkbox

Với kiểu "chọn bất kỳ trong số này", hãy cho mọi ô cùng một name và mỗi ô một value khác nhau. Bọc chúng trong một <fieldset> với <legend> để nhóm có tên:

<!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 gửi topic=html và topic=css: cùng một tên hai lần. Hầu hết framework phía máy chủ đọc được nó thành một danh sách. PHP là ngoại lệ: nó chỉ giữ giá trị cuối trừ khi tên kết thúc bằng cặp ngoặc vuông, name="topic[]". Trong JavaScript, new FormData(form).getAll('topic') trả về ['html', 'css'].

Gửi giá trị khi ô không được chọn

Khi máy chủ cần một giá trị "không" rõ ràng, hãy đặt một input ẩn cùng name trước checkbox. Khi không chọn, chỉ giá trị ẩn được gửi; khi chọn, cả hai được gửi và máy chủ lấy giá trị cuối:

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

Nhấn Continue: form từ chối gửi cho tới khi ô điều khoản được chọn, vì nó có required. Sau đó form gửi marketing=no và terms=accepted, hoặc marketing=no, marketing=yes và terms=accepted khi ô đầu được chọn. Các framework như Rails tạo ra đúng cặp input ẩn này. Hãy kiểm tra cách máy chủ của bạn đọc một tên lặp lại trước khi dựa vào nó.

Chọn tất cả và trạng thái indeterminate

Checkbox có hình dạng thứ ba, một dấu gạch ngang, cho trường hợp "một số nhưng không phải tất cả". Nó chỉ có trong JavaScript: đặt box.indeterminate = true. Ô "chọn tất cả" dùng nó khi một vài ô mà nó điều khiển đã được chọn:

<!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 chỉ thay đổi hình dạng (và điều trình đọc màn hình đọc lên: "mixed" hoặc "partially checked"). Bên dưới, ô vẫn chỉ ở trạng thái được chọn hoặc không, và đó là thứ form gửi đi. Nhấp vào ô indeterminate sẽ xóa dấu gạch và bật tắt nó.

Dùng sự kiện change để phản hồi checkbox, và đọc box.checked để biết trạng thái. box.value không thay đổi khi ô được bật tắt.

Định dạng checkbox

Cách đổi nhanh nhất là accent-color, thuộc tính tô lại màu checkbox gốc mà vẫn giữ mọi hành vi của nó. Muốn giao diện hoàn toàn khác, appearance: none bỏ phần vẽ gốc và cho bạn định dạng input như mọi khung khác:

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

Ô tùy chỉnh vẫn là một checkbox thật: nó bật tắt khi nhấp và khi nhấn Space, được gửi cùng form và được đọc là checkbox. Hãy vẽ nó bằng :checked và giữ một kiểu :focus-visible, vì khi bỏ phần vẽ gốc thì không còn vòng focus nào ngoài cái bạn tự thêm.

Công tắc bật tắt

Công tắc là một checkbox mang nghĩa "bật/tắt ngay lúc này" thay vì "bao gồm mục này". Vẽ nó bằng appearance: none và thêm role="switch" để trình đọc màn hình đọc là một công tắc đang bật hoặc tắt thay vì một checkbox được chọn:

<!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 đặt núm công tắc tính từ đầu dòng, nên trên trang viết từ phải sang trái công tắc trượt theo chiều ngược lại, đúng như mong muốn. Với các lựa chọn có/không theo nhóm mà chỉ được chọn một, xem radio button HTML.

Lỗi thường gặp

• Mong ô không được chọn gửi false. Không có gì được gửi. Hãy coi tên bị thiếu là "tắt" ở phía máy chủ, hoặc thêm input ẩn.
• checked="false". Nó vẫn chọn ô. Hãy xóa thuộc tính.
• Checkbox không có nhãn, hoặc có chữ bên cạnh nhưng không phải <label>. Khi đó ô nhỏ là chỗ nhấp duy nhất và trình đọc màn hình chỉ đọc "checkbox" mà không có tên. Xem nhãn HTML.
• Quên value, khiến mọi ô trong nhóm đều gửi on và máy chủ không phân biệt được.
• Đọc box.value để xem ô có được chọn không. Hãy dùng box.checked.
• Dùng checkbox cho kiểu "chọn một". Đó là việc của radio button.