Sử dụng hộp kiểm là một tùy chọn tốt khi bạn muốn cung cấp cho khách truy cập của mình tùy chọn để chọn một số mục từ một nhóm các lựa chọn. Về vấn đề đó, hộp kiểm hoạt động đối lập với nút radio, chỉ cho phép bạn chọn một mục từ một nhóm các lựa chọn. Ở dạng đơn giản nhất, hộp kiểm chỉ đơn giản là một phần tử đầu vào với thuộc tính loại được đặt thành hộp kiểm, như thế này
Tuy nhiên, như với tất cả các phần tử đầu vào, bạn cần xác định tên để nó có thể sử dụng được - không có tên, phần tử sẽ không thể nhận dạng được khi gửi biểu mẫu trở lại máy chủ để xử lý. Bạn cũng muốn đặt một giá trị - đây sẽ là giá trị được gửi đến máy chủ nếu hộp kiểm đã được chọn. Đây là một ví dụ
Với ví dụ này, nếu hộp kiểm đã được chọn và biểu mẫu được gửi tới máy chủ, thì máy chủ sẽ có thể đọc thành phần biểu mẫu "nameOfChoice" và giá trị của nó sẽ là 1
Đã kiểm tra hay chưa kiểm tra?
Lưu ý cách tất cả các hộp kiểm cho đến nay chưa được kiểm tra ngay từ đầu - người dùng sẽ phải tương tác với hộp kiểm để thay đổi trạng thái của nó từ không được kiểm tra sang được kiểm tra. Đây có thể là điều bạn muốn, nhưng đôi khi, bạn muốn hộp kiểm được chọn theo mặc định, để đề xuất lựa chọn cho người dùng hoặc vì bạn đang hiển thị hộp kiểm có giá trị tương ứng với cài đặt hiện có, e. g. từ cơ sở dữ liệu. May mắn thay, điều này rất đơn giản - chỉ cần thêm thuộc tính đã chọn vào hộp kiểm
Ngày xưa của XHTML, nơi mà mỗi thuộc tính phải luôn có một giá trị, kể cả các thuộc tính boolean, nó sẽ trông như thế này
Cả hai cách đều hoạt động trong tất cả các trình duyệt hiện đại, nhưng cách đầu tiên ngắn hơn và "giống HTML5" hơn
Nhiều lựa chọn
Cho đến nay, tất cả các hộp kiểm của chúng tôi đều là các công tắc đơn giản, e. g. để xác định xem một tùy chọn được bật hay tắt. Các hộp kiểm là tuyệt vời cho điều đó, nhưng như đã đề cập, chúng cũng có thể được sử dụng để cho phép người dùng lựa chọn các tùy chọn có thể. Để tôi chỉ cho bạn một ví dụ rõ ràng khi điều này có ý nghĩa
What is Your Favorite Pet?
Cats
Dogs
Birds
Lưu ý rằng bây giờ chúng ta có nhiều hộp kiểm, nhưng tất cả chúng đều có cùng tên ["favorite_pet"] nhưng khác giá trị [e. g. "Loài chó"]. Khi biểu mẫu này được gửi trở lại máy chủ, tất cả các hộp kiểm này sẽ được biểu thị bằng một tên duy nhất, nhưng giá trị sẽ là một mảng gồm 0-3 mục. Nếu bạn đã sử dụng các nút radio thay vì các hộp kiểm, người dùng sẽ chỉ được phép chọn một con vật yêu thích duy nhất, nhưng với các hộp kiểm, họ có thể chọn không con nào, tất cả hoặc một số con
Nhãn cho hộp kiểm
Nếu bạn đã kiểm tra ví dụ trước, bạn sẽ nhận thấy rằng chúng tôi có thể đặt văn bản bên cạnh hộp kiểm, nhưng chúng vẫn là hai nội dung riêng biệt - bạn không thể nhấp vào văn bản để kích hoạt hộp kiểm. Điều này có thể thực sự gây khó chịu cho người dùng, nhưng thật may mắn cho chúng tôi, nó rất dễ giải quyết. Chỉ cần sử dụng phần tử nhãn. Đây là một ví dụ cơ bản để cho bạn thấy sự khác biệt
Cats
Dogs
Hai hộp kiểm - một không có nhãn và một có. Chúng có thể trông gần giống nhau, nhưng cái có nhãn có thể được kích hoạt bằng cách nhấp vào cả hộp kiểm thực tế và nhãn đính kèm. Điều này thật tuyệt nếu bạn đang ngồi trên máy tính để bàn bằng chuột, nhưng thậm chí còn tuyệt hơn khi bạn đang sử dụng thiết bị cảm ứng như điện thoại thông minh, nơi mà các hộp kiểm nhỏ có thể khó chạm bằng ngón tay của bạn
Nhãn rất đơn giản - nó sử dụng thuộc tính for để gắn chính nó vào thành phần biểu mẫu có thuộc tính id phù hợp [chú ý cách tôi có "chó" ở cả hai nơi]
Làm việc năng động với một hộp kiểm
Giống như bất kỳ phần tử DOM nào khác, bạn có thể thao tác hộp kiểm bằng JavaScript. Về vấn đề đó, thật thú vị khi kiểm tra xem hộp kiểm có được chọn hay không và có thể thêm một số logic để kiểm soát số lượng tùy chọn mà người dùng có thể chọn. Để cho bạn thấy điều này có thể được thực hiện như thế nào, tôi đã mở rộng một ví dụ trước đó [bộ chọn "Thú cưng yêu thích"] để bao gồm một số phép thuật JavaScript
What is Your Favorite Pet?
Cats
Dogs
Birds
function ValidatePetSelection[]
{
var checkboxes = document.getElementsByName["favorite_pet"];
var numberOfCheckedItems = 0;
for[var i = 0; i < checkboxes.length; i++]
{
if[checkboxes[i].checked]
numberOfCheckedItems++;
}
if[numberOfCheckedItems > 2]
{
alert["You can't select more than two favorite pets!"];
return false;
}
}
Cho phép tôi nhanh chóng chạy qua những gì mã này làm. Chúng tôi có biểu mẫu giống như trước đây, nhưng chúng tôi đã thêm trình xử lý sự kiện vào từng hộp kiểm, khiến chúng gọi hàm JavaScript [ValidatePetSelection] khi người dùng nhấp vào chúng. Trong chức năng này, chúng tôi nắm giữ tất cả các hộp kiểm có liên quan bằng cách sử dụng hàm getElementsByName và sau đó chúng tôi lặp qua chúng để xem chúng có được kiểm tra hay không - đối với mỗi mục được kiểm tra, chúng tôi thêm vào một số. Sau đó, số này được kiểm tra và nếu vượt quá hai, thì chúng tôi sẽ thông báo cho người dùng về sự cố [chỉ có thể chọn hai thú cưng] và sau đó chúng tôi trả về false. Trả về false sẽ ngăn hộp kiểm được chọn
Đây chỉ là một ví dụ đơn giản về cách làm việc với các hộp kiểm bằng JavaScript. Bạn có thể làm được nhiều hơn thế, đặc biệt nếu bạn sử dụng khung JavaScript như jQuery, điều này sẽ giúp việc chọn và thao tác các phần tử DOM dễ dàng hơn rất nhiều
Tóm lược
Các hộp kiểm cho phép bạn thiết lập các tùy chọn có thể lựa chọn cho người dùng của mình - để bật hoặc tắt một cài đặt hoặc để cho phép nhiều lựa chọn, như trong ví dụ về Thú cưng yêu thích. Bạn nên sử dụng nhãn để liên kết hộp kiểm của mình và văn bản mô tả lại với nhau, để cho phép người dùng nhấp vào vùng rộng hơn khi thao tác với hộp kiểm - điều này cũng tốt cho các công nghệ hỗ trợ như trình đọc màn hình dành cho người khiếm thị