Trường hộp kiểm
Thu thập các thỏa thuận và lựa chọn đa dạng một cách dễ dàng. Từ các ô chọn có/không đơn giản đến danh sách chọn nhiều với chức năng "Chọn tất cả", điều khiển giá trị tối thiểu/tối đa và bố cục thông minh – trường Checkbox xử lý các thỏa thuận đơn lẻ và câu hỏi trắc nghiệm với khả năng xác thực mạnh mẽ và các tùy chọn thân thiện với người dùng.
Hai chế độ đáp ứng mọi nhu cầu chọn hộp kiểm
Hoàn hảo cho:
Các tính năng mạnh mẽ cho mọi trường hợp sử dụng
Hai chế độ hộp kiểm
Chế độ chọn một ô duy nhất:
Một ô chọn duy nhất dành cho các câu hỏi có/không, thỏa thuận hoặc đăng ký. Hoàn hảo cho việc chấp nhận điều khoản, đăng ký nhận bản tin và các mẫu đơn đồng ý.
Trường hợp sử dụng:
- Tôi đồng ý với các điều khoản và điều kiện.
- “Đăng ký nhận bản tin của tôi”
- “Vâng, tôi muốn nhận thông báo cập nhật.”
- Tôi xác nhận thông tin này là chính xác.
Tính năng, đặc điểm:
- Văn bản nhãn hộp kiểm tùy chỉnh
- Trạng thái mặc định đã chọn/chưa chọn
- Giá trị do người dùng tự nhập (có, 1, đúng, v.v.)
- Tùy chọn xác thực bắt buộc
Chế độ nhiều hộp kiểm:
Nhiều tùy chọn cho phép người dùng chọn nhiều đáp án. Hoàn hảo cho các câu hỏi dạng "Chọn tất cả các đáp án phù hợp", thu thập sở thích và khảo sát nhiều lựa chọn.
Trường hợp sử dụng:
- “Bạn quan tâm đến những tính năng nào?” (chọn nhiều đáp án)
- “Chọn phương thức liên lạc ưa thích của bạn”
- “Hãy chọn tất cả các dịch vụ bạn cần”
- “Bạn quan tâm đến những chủ đề nào?” (chọn nhiều đáp án)
Tính năng, đặc điểm:
- Tùy chọn hộp kiểm không giới hạn
- Ba kiểu bố cục
- Tùy chọn “Chọn tất cả”
- Giới hạn lựa chọn tối thiểu/tối đa
- “Khác” kèm ô nhập văn bản
- Tùy chọn độc quyền “Không có lựa chọn nào ở trên”
🎨 Ba tùy chọn bố cục (Chế độ đa dạng)
Bố cục dọc (xếp chồng):
Các ô chọn xuất hiện trên mỗi dòng, xếp chồng lên nhau theo chiều dọc. Đây là bố cục dễ đọc nhất cho các nhãn tùy chọn dài.
Tốt nhất cho:
- Văn bản tùy chọn dài
- 3-10 lựa chọn
- Biểu mẫu ưu tiên thiết bị di động
- Khả năng đọc tối đa
Bố cục ngang (cạnh nhau):
Các ô chọn xuất hiện cạnh nhau thành một hàng. Bố cục nhỏ gọn cho các nhãn ngắn.
Tốt nhất cho:
- 2-5 lựa chọn ngắn
- Hình dạng nhỏ gọn
- Bố cục màn hình nền
- Hiệu quả không gian
Bố cục dạng lưới (nhiều cột):
Các ô chọn được sắp xếp theo dạng lưới 2 cột. Bố cục cân bằng giúp tiết kiệm không gian mà vẫn đảm bảo tính dễ đọc.
Tốt nhất cho:
- 4-12 lựa chọn
- Nhãn có độ dài trung bình
- Thiết kế cân đối
- Ngoại hình chuyên nghiệp
Hành vi phản ứng:
Tất cả các bố cục đều tự động thích ứng với màn hình thiết bị di động, xếp chồng lên nhau khi cần thiết để tương tác cảm ứng tốt hơn.
✨ Tùy chọn “Chọn tất cả”
Lựa chọn bằng một cú nhấp chuột:
Thêm một ô chọn đặc biệt "Chọn tất cả" ở đầu danh sách. Người dùng có thể chọn/bỏ chọn tất cả các tùy chọn chỉ bằng một cú nhấp chuột.
Hành vi thông minh:
- Kiểm tra đồng thời tất cả các tùy chọn thông thường.
- Bỏ chọn tất cả khi nhấp chuột lại
- Tự động bỏ chọn nếu bất kỳ tùy chọn nào bị bỏ chọn.
- Hiển thị trạng thái không xác định khi một số (không phải tất cả) tùy chọn được chọn.
- Loại trừ tùy chọn “Không có mục nào ở trên” khỏi danh sách lựa chọn.
Hoàn hảo cho:
- Danh sách hộp kiểm dài (5+ tùy chọn)
- Các biểu mẫu nơi người dùng thường chọn tất cả mọi thứ.
- Câu hỏi dạng “Chọn tất cả các đáp án phù hợp”
- Lựa chọn quyền hạn và tính năng
Kinh nghiệm người dùng:
Tiết kiệm thời gian khi xử lý danh sách dài. Người dùng có thể chọn tất cả, sau đó bỏ chọn các trường hợp ngoại lệ cụ thể.
✏️ Tùy chọn “Khác” với ô nhập văn bản
Bộ sưu tập phản hồi tùy chỉnh:
Thêm hộp kiểm "Khác" khi được chọn sẽ hiển thị một trường văn bản. Người dùng có thể nhập câu trả lời của riêng họ nếu các tùy chọn có sẵn không phù hợp.
Cách hoạt động:
- Ô tùy chọn “Khác” xuất hiện ở cuối danh sách.
- Khi được chọn, trường nhập văn bản sẽ xuất hiện.
- Người dùng nhập câu trả lời tùy chỉnh
- Cả lựa chọn hộp kiểm và văn bản đều được gửi đi.
Trường hợp sử dụng:
- “Phương thức liên lạc ưu tiên: …Khác (vui lòng ghi rõ)”
- “Sở thích: …Các chủ đề khác”
- “Bạn biết đến chúng tôi qua nguồn nào: …Nguồn khác”
- Bất kỳ danh sách nào không thể...
Lợi ích:
Ghi nhận các phản hồi bất ngờ, cung cấp tính linh hoạt, ngăn chặn việc lựa chọn "ép buộc" và cải thiện chất lượng dữ liệu.
❌ Tùy chọn “Không có đáp án nào ở trên”
Không được lựa chọn độc quyền:
Thêm tùy chọn “Không có mục nào ở trên” để tự động bỏ chọn tất cả các lựa chọn khác khi nhấp vào.
Độc quyền thông minh:
- Khi chọn "Không có", tất cả các tùy chọn khác sẽ tự động bị bỏ chọn.
- Khi bất kỳ tùy chọn nào khác được chọn, tùy chọn “Không” sẽ tự động bị bỏ chọn.
- Cung cấp cách rõ ràng để chỉ ra rằng không có lựa chọn nào được áp dụng.
- Ngăn ngừa các lựa chọn mâu thuẫn
Trường hợp sử dụng:
- Câu hỏi tùy chọn
- “Chọn tất cả các dị ứng: …Không có dị ứng nào ở trên”
- Người kiểm tra trình độ
- Lựa chọn sở thích
Tại sao nên bao gồm:
Ngăn ngừa việc bỏ ngang biểu mẫu, thể hiện sự kỹ lưỡng, cung cấp lựa chọn phủ định rõ ràng và cải thiện độ chính xác của dữ liệu.
📊 Điều khiển lựa chọn giá trị nhỏ nhất/lớn nhất
Số lượng lựa chọn điều khiển:
Thiết lập số lượng tối thiểu và tối đa các ô chọn được phép/phải chọn.
Số lượng lựa chọn tối thiểu:
Yêu cầu người dùng chọn ít nhất X tùy chọn. Biểu mẫu sẽ không được gửi đi cho đến khi yêu cầu được đáp ứng.
Ví dụ:
- “Chọn ít nhất 2 sở thích” (Tối thiểu: 2)
- “Chọn tối thiểu 3 tùy chọn” (Tối thiểu: 3)
- “Chọn ít nhất 1 tùy chọn” (Tối thiểu: 1)
Số lượng lựa chọn tối đa:
Giới hạn người dùng chỉ được chọn tối đa X tùy chọn. Các ô chọn sẽ bị vô hiệu hóa sau khi đạt đến giới hạn.
Ví dụ:
- “Hãy chọn 3 tính năng nổi bật nhất” (Tối đa: 3)
- “Chọn tối đa 5 dịch vụ” (Tối đa: 5)
- “Chọn tối đa 2 tùy chọn” (Tối đa: 2)
Xóa phản hồi:
Người dùng sẽ thấy các thông báo xác nhận như “Vui lòng chọn ít nhất 2 tùy chọn” hoặc “Chỉ được phép chọn tối đa 3 tùy chọn”.
🔧 Quản lý tùy chọn dễ dàng
Hoàn toàn kiểm soát các lựa chọn:
- Thêm tùy chọn – Nhập và nhấn Enter hoặc nhấp vào “Thêm tùy chọn”. Tạo danh sách hộp kiểm chỉ trong vài giây.
- Chỉnh sửa tùy chọn – Cập nhật văn bản hiển thị (những gì người dùng nhìn thấy) và giá trị (những gì được gửi đi) một cách độc lập.
- Mặc định đã chọn – Chọn trước các ô kiểm cụ thể bằng cách đánh dấu vào ô bên cạnh mỗi tùy chọn.
- Tùy chọn sắp xếp lại – Sử dụng các phím mũi tên lên/xuống để sắp xếp các ô chọn theo đúng thứ tự.
- Tùy chọn xóa – Loại bỏ các tùy chọn không mong muốn chỉ với một cú nhấp chuột.
Hình thức hiển thị so với giá trị thực:
- Nhãn: Những gì người dùng nhìn thấy (ví dụ: “Cập nhật email”)
- Giá trị: Nội dung được lưu trữ (ví dụ: “email_updates”)
Xây dựng hàng loạt:
Thêm nhiều tùy chọn nhanh chóng bằng cách gõ, nhấn Enter, gõ, nhấn Enter – tạo danh sách hộp kiểm nhanh chóng.
☑️ Tính năng hộp kiểm đơn
Tuỳ chọn Tùy chọn:
Văn bản nhãn hộp kiểm:
Văn bản hiển thị bên cạnh ô chọn. Hãy viết sao cho rõ ràng và cụ thể (ví dụ: “Tôi đồng ý nhận email tiếp thị”).
Trạng thái mặc định đã chọn:
Hãy đánh dấu chọn ô này trước khi biểu mẫu được tải. Sử dụng cẩn thận – người dùng nên chủ động đánh dấu vào các ô đồng ý.
Giá trị tùy chỉnh đã gửi:
Thiết lập giá trị được gửi đi khi được chọn (thường là “yes”, “1” hoặc “true”). Mặc định là “yes”.
Yêu cầu xác thực:
Bắt buộc người dùng phải chọn ô checkbox. Người dùng phải tích vào ô này để gửi biểu mẫu. Rất phù hợp cho các thỏa thuận bắt buộc.
🔀 Logic điều kiện
Khả năng hiển thị hộp kiểm động:
Hiển thị hoặc ẩn các trường hộp kiểm dựa trên các giá trị khác trong biểu mẫu. Chỉ hiển thị các tùy chọn khi có liên quan.
Các quy tắc logic nâng cao:
Logic AND – Tất cả các điều kiện phải được đáp ứng
Logic OR – Bất kỳ điều kiện nào cũng có thể kích hoạt hành động.
8 toán tử – Bằng, Không bằng, Lớn hơn, Nhỏ hơn, Chứa, Rỗng, và nhiều toán tử khác
Trường hợp sử dụng:
Chỉ hiển thị hộp kiểm “Tùy chọn vận chuyển” khi tùy chọn “Yêu cầu vận chuyển” được chọn.
Hiển thị "Chủ đề bản tin" khi hộp kiểm đăng ký được chọn.
Hiển thị “Dịch vụ bổ sung” khi loại dịch vụ bằng “Cao cấp”
Ẩn mục “Tùy chọn giảm giá” khi tổng giá trị đơn hàng dưới 50 đô la.
🎯 Trải nghiệm người dùng được nâng cao
Các tính năng thông minh được tích hợp sẵn:
- Các chỉ báo trực quan – Ô chọn rõ ràng với khoảng cách phù hợp
- Điều hướng bằng bàn phím – Dễ dàng di chuyển qua các tùy chọn bằng phím Tab.
- Thân thiện với màn hình cảm ứng – Vùng chạm lớn dành cho thiết bị di động
- Lựa chọn mặc định – Chọn trước các tùy chọn cụ thể
- Lớp CSS tùy chỉnh – Áp dụng kiểu dáng cho các nhóm hộp kiểm
- Hỗ trợ khả năng truy cập – Nhãn ARIA, tương thích với trình đọc màn hình
- Tối ưu hóa cho thiết bị di động – Kích thước ô chọn hoàn hảo cho màn hình cảm ứng
- Nhãn rõ ràng – Văn bản dễ đọc với căn chỉnh phù hợp
- Xác thực bắt buộc – Thông báo lỗi rõ ràng
- Văn bản trợ giúp – Thêm mô tả cho các nhóm hộp kiểm phức tạp
Thiết lập đơn giản chỉ với 3 bước
Chuẩn bị sẵn trường hộp kiểm của bạn chỉ trong vài phút
Thêm trường hộp kiểm
Kéo và thả trường Checkbox từ phần Trường cơ bản vào biểu mẫu của bạn.
Chọn chế độ
Chọn “Chọn một ô” cho câu hỏi có/không hoặc “Chọn nhiều ô” cho các câu hỏi có nhiều lựa chọn.
Định cấu hình các tùy chọn
Đối với lựa chọn một ô: đặt nhãn và giá trị cho ô chọn. Đối với lựa chọn nhiều ô: thêm tùy chọn, chọn bố cục, tùy chọn bật tùy chọn “Chọn tất cả” hoặc “Khác”, và đặt số lượng lựa chọn tối thiểu/tối đa.
🎉 Vậy là xong! Trường hộp kiểm của bạn đã sẵn sàng với tính năng xác thực thông minh.
Ứng dụng trong thế giới thực
Thỏa thuận & Sự đồng ý
* Chấp nhận các điều khoản và điều kiện
* Thỏa thuận chính sách bảo mật
* Đăng ký nhận email
* Đăng ký nhận bản tin
Khảo sát và phản hồi
* Câu hỏi dạng “Chọn tất cả các đáp án đúng”
* Lựa chọn nhiều sở thích
* Bộ sưu tập tùy chọn tính năng
* Lựa chọn chủ đề quan tâm
Thương mại điện tử
* Lựa chọn tính năng sản phẩm
* Các dịch vụ bổ sung
* Tùy chọn vận chuyển
* Tùy chọn thông báo
Mẫu đăng ký
* Tùy chọn giao tiếp
* Danh mục sở thích
* Cài đặt quyền
* Lựa chọn quyền truy cập tính năng
Ứng dụng
* Người kiểm tra trình độ chuyên môn
* Lựa chọn kỹ năng
* Các lĩnh vực quan tâm
* Các tùy chọn về tính khả dụng
Cài đặt & Tùy chọn
* Cài đặt tài khoản
* Tùy chọn quyền riêng tư
* Các lựa chọn thông báo
* Công tắc tính năng
Hoàn thành các tùy chọn trường
Cấu hình cơ bản
- Nhãn trường – Câu hỏi hoặc tiêu đề hiển thị phía trên các ô chọn
- Mô tả/Văn bản trợ giúp – Hướng dẫn bổ sung cho người dùng
- Trường bắt buộc – Bắt buộc chọn ô checkbox
- Ký tự đại diện – Không áp dụng cho hộp kiểm
Chế độ hộp kiểm
Chọn loại chế độ:
- Chọn một ô duy nhất – Câu hỏi Có/Không, đồng ý hoặc lựa chọn tham gia (một ô chọn)
- Nhiều ô chọn – Tùy chọn chọn nhiều (nhiều ô chọn)
Tùy chọn hộp kiểm đơn
- Văn bản bên cạnh ô chọn – Nhãn hiển thị bên cạnh ô chọn (ví dụ: “Tôi đồng ý với các điều khoản”)
- Bắt đầu bằng cách chọn – Ô chọn được đánh dấu sẵn khi biểu mẫu được tải.
- Giá trị khi được chọn – Giá trị dữ liệu được lưu trữ khi được chọn (mặc định: “có”)
Nhiều tùy chọn hộp kiểm
Kiểu bố cục:
- Xếp chồng (mỗi hàng một cái) – Sắp xếp theo chiều dọc
- Xếp cạnh nhau (thành một hàng) – Sắp xếp theo chiều ngang
- Lưới (nhiều cột) – Bố cục lưới 2 cột
Tùy chọn hộp kiểm:
Hãy lập danh sách các lựa chọn của bạn:
- Văn bản hiển thị – Những gì người dùng nhìn thấy (ví dụ: “Email”)
- Giá trị – Nội dung được gửi đi (ví dụ: “email”)
- Đã chọn mặc định – Chọn trước các tùy chọn cụ thể
- Sắp xếp lại – Di chuyển các tùy chọn lên/xuống
- Xóa – Loại bỏ các tùy chọn
Tùy chọn đặc biệt:
- Thêm tùy chọn “Chọn tất cả” – Thêm hộp kiểm ở trên cùng để chọn/bỏ chọn tất cả các tùy chọn.
- Thêm tùy chọn “Khác” với hộp văn bản – Thêm tùy chọn “Khác” với trường văn bản để tùy chỉnh câu trả lời.
- Thêm tùy chọn “Không có mục nào ở trên” – Thêm tùy chọn độc quyền, khi được chọn sẽ bỏ chọn tất cả các tùy chọn khác.
Giới hạn lựa chọn:
- Số lượng lựa chọn tối thiểu cần thiết – Số lượng tối thiểu các ô chọn phải được chọn (ví dụ: 2)
- Số lượng lựa chọn tối đa được phép – Số lượng hộp kiểm tối đa có thể được chọn (ví dụ: 5)
Logic có điều kiện
- Kích hoạt logic điều kiện – Hiển thị/ẩn dựa trên điều kiện
- Loại logic
- Tất cả các điều kiện phải được đáp ứng (VÀ)
- Mọi điều kiện đều có thể được đáp ứng (HOẶC)
- Quy tắc điều kiện
- Hiện/Ẩn – Hành động cần thực hiện
- Trường – Trường nào cần kiểm tra
- Toán tử – Bằng, Không bằng, Chứa, Lớn hơn, Nhỏ hơn, Rỗng, Không rỗng
- Giá trị – Giá trị so sánh
- Nhiều điều kiện – Thêm số lượng quy tắc không giới hạn
Tùy chọn nâng cao
- Ẩn trường – Làm cho trường trở nên vô hình (không khuyến nghị sử dụng cho hộp kiểm)
- Lớp CSS tùy chỉnh – Áp dụng kiểu dáng tùy chỉnh
- Thuộc tính trợ năng – Nhãn ARIA dành cho trình đọc màn hình
Tại sao nên chọn trường hộp kiểm của chúng tôi?
✅ Hai chế độ – Một hộp kiểm hoặc nhiều hộp kiểm trong cùng một loại trường
✅ Bố cục linh hoạt – Bố trí theo chiều dọc, chiều ngang hoặc dạng lưới
✅ Chọn tất cả – Lựa chọn chỉ với một cú nhấp chuột để thuận tiện
✅ Tùy chọn khác – Ô nhập văn bản cho các câu trả lời tùy chỉnh
✅ Không có tùy chọn nào – Lựa chọn độc quyền không thuộc bất kỳ hình thức nào
✅ Giới hạn tối thiểu/tối đa – Số lượng lựa chọn kiểm soát
✅ Quản lý dễ dàng – Thêm, chỉnh sửa, sắp xếp lại, xóa tùy chọn một cách dễ dàng
✅ Dễ Sử Dụng – Nhãn rõ ràng, khoảng cách hợp lý, dễ thao tác bằng cảm ứng.
✅ Tích hợp đầy đủ – Hoạt động liền mạch với tất cả các tính năng của biểu mẫu
Câu Hỏi Thường Gặp
Hỏi: Chế độ chọn một ô và nhiều ô khác nhau có gì khác biệt?
Chế độ đơn hiển thị một ô chọn để người dùng đưa ra quyết định có/không. Chế độ đa hiển thị nhiều ô chọn, cho phép người dùng chọn nhiều hơn một tùy chọn.
Hỏi: Người dùng có thể chọn tất cả các ô kiểm cùng một lúc không?
Có. Hãy bật tùy chọn “Chọn tất cả” để thêm hộp kiểm cho phép chọn hoặc bỏ chọn tất cả các tùy chọn chỉ bằng một cú nhấp chuột.
Hỏi: Chức năng chọn giá trị nhỏ nhất/lớn nhất hoạt động như thế nào?
Mức tối thiểu đảm bảo người dùng chọn ít nhất một số lượng tùy chọn nhất định. Mức tối đa giới hạn số lượng ô chọn mà họ có thể chọn.
Hỏi: Tùy chọn “Khác” có tác dụng gì?
Nó thêm một ô chọn bổ sung có nhãn “Khác”. Khi được chọn, một trường văn bản sẽ hiện ra để người dùng có thể nhập câu trả lời tùy chỉnh.
Hỏi: Mục “Không có đáp án nào ở trên” hoạt động như thế nào?
Nó hoạt động như một lựa chọn duy nhất. Nếu được chọn, tất cả các ô chọn khác sẽ bị xóa. Nếu bất kỳ tùy chọn nào khác được chọn, tùy chọn “Không” sẽ tự động bị bỏ chọn.
Hỏi: Tôi có thể chọn trước một số ô đánh dấu nhất định không?
Vâng. Đối với chế độ đơn, hãy bật tùy chọn “Start Checked” (Bắt đầu đã chọn). Đối với chế độ đa, hãy đánh dấu vào ô nhỏ bên cạnh mỗi tùy chọn bạn muốn được chọn mặc định.
Hỏi: Tôi có nên đánh dấu chọn trước vào các ô đồng ý không?
Không. Đối với các chính sách, điều khoản và sự đồng ý, người dùng nên tự mình chủ động đánh dấu vào ô đó.
Hỏi: Tôi có thể thay đổi thứ tự các ô chọn không?
Vâng. Sử dụng các mũi tên lên và xuống bên cạnh mỗi tùy chọn để sắp xếp lại thứ tự theo ý muốn của bạn.
Hỏi: Văn bản hiển thị và giá trị khác nhau như thế nào?
Văn bản hiển thị là những gì người dùng nhìn thấy. Giá trị là những gì được lưu trữ trong cơ sở dữ liệu của bạn để có dữ liệu sạch và nhất quán.
Hỏi: Tôi có thể sử dụng logic điều kiện với hộp kiểm không?
Có. Kích hoạt các trường khác dựa trên lựa chọn bằng cách sử dụng các toán tử như “Bằng”, “Trống” hoặc “Không trống”.
Hỏi: Làm thế nào để tạo một hộp kiểm bắt buộc?
Bật tùy chọn “Trường bắt buộc”. Đối với chế độ đơn, ô này phải được chọn. Đối với chế độ đa lựa chọn, người dùng phải chọn ít nhất một tùy chọn hoặc đáp ứng yêu cầu tối thiểu của bạn.
Hỏi: Người dùng có thể thay đổi lựa chọn sau khi đã kiểm tra không?
Đúng vậy. Họ có thể chọn hoặc bỏ chọn bất kỳ tùy chọn nào một cách tự do trước khi gửi biểu mẫu. Tùy chọn "Chọn tất cả" cũng có thể được bật/tắt bất cứ lúc nào.
