Chọn checkbox không có trạng thái xác định - :indeterminate - trong CSS

Trong thiết kế giao diện người dùng web, các lập trình viên thường phải làm việc với phần tử checkbox. Một checkbox thông thường có hai trạng thái: được chọn (checked) và không được chọn (unchecked). Tuy nhiên, trong một số trường hợp cụ thể, bạn có thể muốn biểu diễn một trạng thái trung gian, không xác định cho checkbox. Trạng thái này được gọi là ":indeterminate".

Trạng thái :indeterminate là gì?

Trạng thái ":indeterminate" là trạng thái giữa "được chọn" và "không được chọn" của một checkbox. Điều này thường hữu ích trong các tình huống mà bạn cần biểu diễn một trạng thái chưa quyết định hoặc một trạng thái mà một số nhưng không phải tất cả các tùy chọn con đã được chọn.

Cách thiết lập trạng thái :indeterminate

Để thiết lập trạng thái không xác định cho checkbox trong JavaScript, ta phải truy cập thuộc tính indeterminate của phần tử checkbox đó. Đây là cách thức để thực hiện nó:

document.getElementById('myCheckbox').indeterminate = true;

Như vậy, checkbox có id là "myCheckbox" sẽ được thiết lập ở trạng thái không xác định ngay từ khi trang web được tải.

Cách sử dụng :indeterminate trong CSS

CSS cung cấp các pseudo-class cho phép bạn áp dụng các quy tắc định kiểu (styles) dựa trên trạng thái của checkbox, bao gồm cả trạng thái :indeterminate. Dưới đây là một ví dụ về cách áp dụng style CSS cho checkbox ở trạng thái này:

input[type="checkbox"]:indeterminate {
  background-color: yellow; /* Màu nền cho checkbox */
  border: 2px solid orange;  /* Đường viền cho checkbox */
}

Trong đoạn mã này, màu nền của checkbox được thiết lập thành màu vàng và có đường viền màu cam khi checkbox ở trạng thái không xác định.

Kết hợp :indeterminate với các trạng thái khác

Bạn cũng có thể kết hợp trạng thái :indeterminate với các trạng thái khác bằng cách áp dụng các pseudo-class khác nhau. Ví dụ:

input[type="checkbox"]:indeterminate:hover {
  background-color: lightgrey; 
  border: 2px solid grey;
}

Trong trường hợp này, khi người dùng di chuột vào checkbox đang ở trạng thái không xác định, màu nền sẽ chuyển sang màu xám nhạt và đường viền sẽ có màu xám.

Các ví dụ thực tế

Giả sử bạn có một danh sách các mục, mỗi mục có thể được tùy chọn riêng lẻ. Bạn có thể có một checkbox master để chọn hoặc bỏ chọn tất cả các mục trong danh sách. Khi một vài mục được chọn, nhưng không phải tất cả, checkbox master có thể ở trạng thái :indeterminate để biểu diễn rằng trạng thái tại thời điểm hiện tại là không xác định.

<div>
  <input type="checkbox" id="masterCheckbox">Chọn tất cả
</div>
<div>
  <input type="checkbox" class="childCheckbox">Mục 1
</div>
<div>
  <input type="checkbox" class="childCheckbox">Mục 2
</div>
<div>
  <input type="checkbox" class="childCheckbox">Mục 3
</div>

Sử dụng JavaScript để kiểm soát trạng thái của master checkbox:

const masterCheckbox = document.getElementById('masterCheckbox');
const childCheckboxes = document.querySelectorAll('.childCheckbox');

childCheckboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const allChecked = Array.from(childCheckboxes).every(cb => cb.checked);
    const allUnchecked = Array.from(childCheckboxes).every(cb => !cb.checked);
    
    if (allChecked) {
      masterCheckbox.checked = true;
      masterCheckbox.indeterminate = false;
    } else if (allUnchecked) {
      masterCheckbox.checked = false;
      masterCheckbox.indeterminate = false;
    } else {
      masterCheckbox.indeterminate = true;
    }
  });
});

Kết luận

Trạng thái :indeterminate cung cấp một cách linh hoạt để biểu diễn tình huống không xác định và tăng cường khả năng tương tác của giao diện người dùng web. Bằng cách sử dụng JavaScript để thiết lập trạng thái này và CSS để định kiểu, bạn có thể tạo ra các checkbox không chỉ có hai mà là ba trạng thái, phù hợp cho nhiều ứng dụng phức tạp hơn.