Giá trị hộp kiểm đầu vào HTML

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
  
        
  
      
    
  
  

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ị

Làm cách nào để đặt giá trị trong hộp kiểm trong HTML?

Giá trị của đầu vào hộp kiểm là gì?

Làm cách nào để lấy giá trị từ biểu mẫu hộp kiểm?

Hộp kiểm đầu vào có cần giá trị không?