Các phần tử <input> thuộc loại checkbox được hiển thị theo mặc định dưới dạng hộp được chọn (đánh dấu) khi được kích hoạt, giống như bạn có thể thấy trong biểu mẫu giấy tờ chính thức của chính phủ. Giao diện chính xác phụ thuộc vào cấu hình hệ điều hành mà trình duyệt đang chạy. Nói chung đây là một hình vuông nhưng nó có thể có các góc tròn. Một hộp kiểm cho phép bạn chọn các giá trị đơn lẻ để gửi trong một biểu mẫu (hoặc không)
Ghi chú. Các nút chọn tương tự như hộp kiểm, nhưng có một điểm khác biệt quan trọng — các nút chọn được nhóm thành một bộ trong đó chỉ có thể chọn một nút chọn tại một thời điểm, trong khi các hộp kiểm cho phép bạn bật và tắt các giá trị đơn lẻ. Khi có nhiều điều khiển, các nút radio cho phép chọn một trong số tất cả các điều khiển đó, trong khi các hộp kiểm cho phép chọn nhiều giá trị
Một chuỗi đại diện cho giá trị của hộp kiểm. Điều này không được hiển thị ở phía máy khách, nhưng trên máy chủ, đây là ____0_______0 được cung cấp cho dữ liệu được gửi cùng với hộp kiểm của ____________1. Lấy ví dụ sau
<form><div><inputtype="checkbox"id="subscribeNews"name="subscribe"value="newsletter"/><labelfor="subscribeNews">Subscribe to newsletter?</label></div><div><buttontype="submit">Subscribe</button></div></form>
Trong ví dụ này, chúng ta có tên là
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
2 và giá trị là
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
3. Khi biểu mẫu được gửi, cặp tên/giá trị dữ liệu sẽ là
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
4
Nếu thuộc tính
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
0 bị bỏ qua, giá trị mặc định cho hộp kiểm là
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
6, vì vậy dữ liệu đã gửi trong trường hợp đó sẽ là
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
7
Note: If a checkbox is unchecked when its form is submitted, there is no value submitted to the server to represent its unchecked state (e.g.
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
8); the value is not submitted to the server at all. If you wanted to submit a default value for the checkbox when it is unchecked, you could include an inside the form with the same
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
1 and
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
0, generated by JavaScript perhaps.
Ngoài các thuộc tính chung được chia sẻ bởi tất cả các phần tử <input>, đầu vào "checkbox" hỗ trợ các thuộc tính sau
Thuộc tính Boolean cho biết hộp kiểm này có được chọn theo mặc định hay không (khi tải trang). Nó không cho biết liệu hộp kiểm này hiện có được chọn hay không. nếu trạng thái của hộp kiểm bị thay đổi, thuộc tính nội dung này không phản ánh sự thay đổi. (Chỉ thuộc tính IDL của
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
4 của
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
3 được cập nhật. )
Ghi chú. Không giống như các tùy chọn kiểm soát đầu vào khác, giá trị của hộp kiểm chỉ được đưa vào dữ liệu đã gửi nếu hộp kiểm đó hiện là
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
3. Nếu đúng như vậy, thì giá trị của thuộc tính
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
0 của hộp kiểm được báo cáo là giá trị của đầu vào. Không giống như các trình duyệt khác, Firefox theo mặc định duy trì trạng thái được kiểm tra động của một <input> khi tải trang. Sử dụng thuộc tính để kiểm soát tính năng này
Thuộc tính
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
0 là thuộc tính mà tất cả các <input> chia sẻ; . khi một biểu mẫu được gửi, chỉ các hộp kiểm hiện đang được chọn mới được gửi tới máy chủ và giá trị được báo cáo là giá trị của thuộc tính
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
0. Nếu
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
0 không được chỉ định khác, thì đó là chuỗi
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
6 theo mặc định. Điều này đã được chứng minh ở phần trên
Chúng tôi đã đề cập đến cách sử dụng hộp kiểm cơ bản nhất ở trên. Bây giờ chúng ta hãy xem các tính năng và kỹ thuật phổ biến khác liên quan đến hộp kiểm mà bạn sẽ cần
Ví dụ chúng ta thấy ở trên chỉ chứa một hộp kiểm; . Nếu chúng hoàn toàn không liên quan, thì bạn có thể giải quyết chúng một cách riêng biệt, như được hiển thị ở trên. Tuy nhiên, nếu tất cả chúng đều có liên quan với nhau thì mọi chuyện không đơn giản như vậy
Ví dụ: trong bản demo sau, chúng tôi bao gồm nhiều hộp kiểm để cho phép người dùng chọn sở thích của họ (xem phiên bản đầy đủ trong phần)
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
Trong ví dụ này, bạn sẽ thấy rằng chúng tôi đã đánh dấu cho mỗi hộp kiểm giống nhau
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
1. Nếu cả hai hộp kiểm đều được chọn và sau đó biểu mẫu được gửi, bạn sẽ nhận được một chuỗi các cặp tên/giá trị được gửi như thế này.
inputInstance.indeterminate =true;
8. Khi chuỗi này đến máy chủ, bạn cần phân tích cú pháp chuỗi đó chứ không phải dưới dạng một mảng kết hợp, vì vậy tất cả các giá trị, không chỉ giá trị cuối cùng, của
inputInstance.indeterminate =true;
9 đều được ghi lại. Đối với một kỹ thuật được sử dụng với Python, hãy xem Xử lý nhiều hộp kiểm với một biến phía máy chủ, chẳng hạn
Để làm cho hộp kiểm được chọn theo mặc định, bạn đặt cho nó thuộc tính
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
3. Xem ví dụ bên dưới
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
Trong các ví dụ trên, bạn có thể nhận thấy rằng bạn có thể chuyển đổi một hộp kiểm bằng cách nhấp vào phần tử
1 được liên kết của nó cũng như trên chính hộp kiểm đó. Đây là một tính năng thực sự hữu ích của nhãn biểu mẫu HTML giúp dễ dàng nhấp vào tùy chọn bạn muốn, đặc biệt là trên các thiết bị màn hình nhỏ như điện thoại thông minh
Ngoài khả năng truy cập, đây là một lý do chính đáng khác để thiết lập đúng các yếu tố
Ngoài các trạng thái được chọn và không được chọn, có một trạng thái thứ ba mà một hộp kiểm có thể ở. không xác định. Đây là trạng thái không thể nói mục đó được bật hay tắt. Điều này được đặt bằng thuộc tính
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
4 thông qua JavaScript (không thể đặt thuộc tính này bằng thuộc tính HTML)
inputInstance.indeterminate =true;
Một hộp kiểm ở trạng thái không xác định có một đường ngang trong hộp (trông hơi giống dấu gạch nối hoặc dấu trừ) thay vì dấu kiểm/đánh dấu trong hầu hết các trình duyệt
Không có nhiều trường hợp sử dụng cho tài sản này. Phổ biến nhất là khi có sẵn một hộp kiểm "sở hữu" một số tùy chọn phụ (cũng là hộp kiểm). Nếu tất cả các tùy chọn phụ được chọn, hộp kiểm sở hữu cũng được chọn và nếu tất cả chúng không được chọn, hộp kiểm sở hữu sẽ không được chọn. Nếu bất kỳ một hoặc nhiều tùy chọn phụ nào có trạng thái khác với các tùy chọn khác, thì hộp kiểm sở hữu ở trạng thái không xác định
Điều này có thể được nhìn thấy trong ví dụ dưới đây (nhờ CSS Tricks cho nguồn cảm hứng). Trong ví dụ này, chúng tôi theo dõi các thành phần mà chúng tôi đang thu thập cho một công thức. Khi bạn chọn hoặc bỏ chọn hộp kiểm của một thành phần, hàm JavaScript sẽ kiểm tra tổng số thành phần đã chọn
Nếu không có cái nào được chọn, hộp kiểm của tên công thức được đặt thành không được chọn
Nếu một hoặc hai được chọn, hộp kiểm của tên công thức được đặt thành
Nếu cả ba đều được chọn, hộp kiểm của tên công thức được đặt thành
<fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"checked/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div></fieldset>
Ghi chú. Nếu bạn gửi biểu mẫu có hộp kiểm không xác định, điều tương tự sẽ xảy ra như thể hộp kiểm không được chọn — không có dữ liệu nào được gửi để đại diện cho hộp kiểm
Các hộp kiểm hỗ trợ xác thực (được cung cấp cho tất cả các <input>). Tuy nhiên, hầu hết các
<form><fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div><div><inputtype="checkbox"id="art"name="interest"value="art"/><labelfor="art">Art</label></div><div><inputtype="checkbox"id="sports"name="interest"value="sports"/><labelfor="sports">Sports</label></div><div><inputtype="checkbox"id="cooking"name="interest"value="cooking"/><labelfor="cooking">Cooking</label></div><div><inputtype="checkbox"id="other"name="interest"value="other"/><labelfor="other">Other</label><inputtype="text"id="otherValue"name="other"/></div><div><buttontype="submit">Submit form</button></div></fieldset></form>
0. Nếu hộp kiểm có thuộc tính, nhưng không được chọn, thì
<form><fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div><div><inputtype="checkbox"id="art"name="interest"value="art"/><labelfor="art">Art</label></div><div><inputtype="checkbox"id="sports"name="interest"value="sports"/><labelfor="sports">Sports</label></div><div><inputtype="checkbox"id="cooking"name="interest"value="cooking"/><labelfor="cooking">Cooking</label></div><div><inputtype="checkbox"id="other"name="interest"value="other"/><labelfor="other">Other</label><inputtype="text"id="otherValue"name="other"/></div><div><buttontype="submit">Submit form</button></div></fieldset></form>
2 sẽ là
<form><fieldset><legend>Choose your interests</legend><div><inputtype="checkbox"id="coding"name="interest"value="coding"/><labelfor="coding">Coding</label></div><div><inputtype="checkbox"id="music"name="interest"value="music"/><labelfor="music">Music</label></div><div><inputtype="checkbox"id="art"name="interest"value="art"/><labelfor="art">Art</label></div><div><inputtype="checkbox"id="sports"name="interest"value="sports"/><labelfor="sports">Sports</label></div><div><inputtype="checkbox"id="cooking"name="interest"value="cooking"/><labelfor="cooking">Cooking</label></div><div><inputtype="checkbox"id="other"name="interest"value="other"/><labelfor="other">Other</label><inputtype="text"id="otherValue"name="other"/></div><div><buttontype="submit">Submit form</button></div></fieldset></form>
3
Ví dụ sau đây là phiên bản mở rộng của ví dụ "nhiều hộp kiểm" mà chúng ta đã thấy ở trên — ví dụ này có nhiều tùy chọn tiêu chuẩn hơn, cộng với hộp kiểm "khác" mà khi được chọn sẽ khiến một trường văn bản xuất hiện để nhập giá trị cho tùy chọn "khác". Điều này đạt được với một khối JavaScript đơn giản. Ví dụ này cũng bao gồm một số CSS để cải thiện kiểu dáng
Làm cách nào để lấy tên và giá trị của hộp kiểm trong JavaScript?
Bạn cũng có thể sử dụng mã bên dưới để nhận tất cả các giá trị hộp kiểm đã chọn. .
tài liệu. getElementById('btn'). onclick = chức năng () {
var đánh dấuCheckbox = tài liệu. querySelectorAll('input[type="checkbox"]. đã kiểm tra');
cho (hộp kiểm var của hộp kiểm được đánh dấu) {
tài liệu. cơ thể người. nối thêm (hộp kiểm. giá trị + ' ');
.
Làm cách nào để nhận giá trị nhãn của hộp kiểm trong JavaScript?
Để lấy giá trị hộp kiểm trong JavaScript, bạn có thể sử dụng “tài liệu. querySelectorAll()” để chọn các hộp kiểm được chỉ định hoặc “tài liệu. getElementById” để lấy “id” đối với từng hộp kiểm đã chọn và hiển thị giá trị tương ứng của nó
Làm cách nào để lấy ID của hộp kiểm trong JavaScript?
Kích hoạt chức năng OptionSelected() Nhận ID của hộp kiểm đó. Thực hiện thao tác bitwise dựa trên ID đó. .
Kích hoạt chức năng OptionSelected()
Tìm nạp số nguyên được gán cho hộp kiểm đó (
Thực hiện thao tác bitwise với giá trị đó
Làm cách nào để chọn hộp kiểm trong JavaScript?
Trong JavaScript, chúng ta có thể truy cập phần tử hộp kiểm bằng id, lớp hoặc tên thẻ và áp dụng '. đã chọn' vào phần tử , trả về đúng hoặc sai dựa trên hộp kiểm được chọn.