453

Tất cả chúng ta đều biết cách tạo đầu vào hộp kiểm trong HTML:

<input name="checkbox_name" id="checkbox_id" type="checkbox">

Điều tôi không biết - giá trị chính xác về mặt kỹ thuật cho hộp kiểm đã chọn là gì? Tôi đã thấy tất cả những thứ này hoạt động:

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="on">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="checked">
    <input name="checkbox_name" id="checkbox_id" type="checkbox" checked="true">

Có phải câu trả lời rằng nó không quan trọng? Tôi không thấy bằng chứng nào cho câu trả lời được đánh dấu là đúng ở đây từ chính thông số :

Hộp kiểm (và các nút radio) là công tắc bật / tắt có thể được người dùng bật / tắt. Công tắc "bật" khi thuộc tính đã chọn của phần tử điều khiển được đặt. Khi biểu mẫu được gửi, chỉ các điều khiển hộp kiểm "bật" mới có thể thành công. Một số hộp kiểm trong một biểu mẫu có thể dùng chung một tên điều khiển. Vì vậy, ví dụ, hộp kiểm cho phép người dùng chọn một số giá trị cho cùng một thuộc tính. Phần tử INPUT được sử dụng để tạo điều khiển hộp kiểm.

Những gì một người viết spec sẽ nói là câu trả lời chính xác? Vui lòng cung cấp câu trả lời dựa trên bằng chứng.

|
  • Trong phần tóm tắt câu hỏi của bạn, bạn đề cập đến giá trị cho thuộc tính đã chọn, tuy nhiên trong phần mô tả câu hỏi, bạn thảo luận về giá trị chính xác cho hộp kiểm đã chọn. "Giá trị" của hộp kiểm khác với thuộc tính đã chọn, tôi tin rằng trong phần mô tả câu hỏi của bạn, bạn cũng có nghĩa là giá trị của thuộc tính, có lẽ bạn muốn điều chỉnh mô tả câu hỏi. Đối với "giá trị" của một bài đánh giá checkbox stackoverflow.com/questions/14323899/... –  11:24:31 07/10/2018
462

Nói một cách chính xác, bạn nên đặt một cái gì đó có ý nghĩa - theo thông số kỹ thuật ở đây , phiên bản chính xác nhất là:

<input name=name id=id type=checkbox checked=checked>

Đối với HTML, bạn cũng có thể sử dụng cú pháp thuộc tính trống rỗng , checked=""hoặc thậm chí chỉ đơn giản checked(đối với XHTML khắt khe hơn, đây là không được hỗ trợ ).

Tuy nhiên, về mặt hiệu quả, hầu hết các trình duyệt sẽ chỉ hỗ trợ bất kỳ giá trị nào giữa các dấu ngoặc kép. Tất cả những điều sau sẽ được kiểm tra:

<input name=name id=id type=checkbox checked>
<input name=name id=id type=checkbox checked="">
<input name=name id=id type=checkbox checked="yes">
<input name=name id=id type=checkbox checked="blue">
<input name=name id=id type=checkbox checked="false">

Và chỉ những điều sau sẽ được bỏ chọn:

<input name=name id=id type=checkbox>

Xem thêm câu hỏi tương tự này trên disabled="disabled".

|
  • 1
    Cái này sai. Nếu bạn nhìn vào thông số kỹ thuật , nó cho biết: checked (checked)có nghĩa là "Thuộc tính đã kiểm tra có thể có giá trị 'đã kiểm tra'). Chỉ checkedlà giá trị được chấp nhận, không có giá trị nào khác. Thuộc tính boolean cho phép bạn bỏ qua mọi thứ ngoại trừ giá trị checkedđược chấp nhận cũng như checked="checked". –  12:05:17 15/05/2014
  • 1
    Một trang W3 HTML5 định hướng nói rằng checked, checked=""checked="checked"là OK. w3.org/TR/html-markup/input.checkbox.html –  15:15:33 02/06/2014
  • 1
    @Quentin Tôi xin lỗi, câu đó không có ý nghĩa với tôi. Ý của bạn là bạn có thể bỏ qua mọi thứ ngoại trừ tên của thuộc tính? Bởi vì nếu bạn có thể bỏ qua mọi thứ trừ giá trị , bạn có thể chỉ cần viết "checked", không cần tên thuộc tính và nó hoạt động chính xác. –  21:42:12 02/06/2014
  • 1
    @Quentin tl, dr: Nó là ngữ nghĩa, nhưng cú pháp thuộc tính trống chỉ xác định tên của thuộc tính, không phải giá trị . –  21:59:36 02/06/2014
  • 1
    Nếu hộp kiểm ở lại kiểm tra (khi tải lại trang) mặc dù bỏ qua các boolean / thuộc tính rỗng checked , sử dụng autocomplete = "off" để giữ cho trình duyệt của bạn tự động kiểm tra nó. –  09:33:36 07/04/2018
63

Thông số kỹ thuật HTML5 :

http://www.w3.org/TR/html5/forms.html#attr-input-checked :

Thuộc tính nội dung bị vô hiệu hóa là thuộc tính boolean.

http://www.w3.org/TR/html5/infraosystem.html#boolean-attributes :

Sự hiện diện của thuộc tính boolean trên một phần tử đại diện cho giá trị true và sự vắng mặt của thuộc tính đại diện cho giá trị false.

Nếu thuộc tính có mặt, giá trị của nó phải là chuỗi trống hoặc giá trị là một đối sánh không phân biệt chữ hoa chữ thường ASCII cho tên chuẩn của thuộc tính, không có khoảng trắng ở đầu hoặc cuối.

Kết luận :

Những điều sau là hợp lệ, tương đương và đúng :

<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="ChEcKeD" />

Những điều sau đây không hợp lệ :

<input type="checkbox" checked="0" />
<input type="checkbox" checked="1" />
<input type="checkbox" checked="false" />
<input type="checkbox" checked="true" />

Sự vắng mặt của thuộc tính là cú pháp hợp lệ duy nhất cho false :

<input />

sự giới thiệu

Nếu bạn quan tâm đến việc viết XHTML hợp lệ, hãy sử dụng checked="checked", vì <input checked>XHTML không hợp lệ (nhưng HTML hợp lệ) và các lựa chọn thay thế khác khó đọc hơn. Nếu không, chỉ cần sử dụng <input checked>vì nó ngắn hơn.

|
  • 1
    Tôi đã quyết định quay lại để chỉnh sửa 2 và giữ nguyên thông số kỹ thuật đầu tiên. Mặc dù ví dụ đầu tiên là cách để đi nói chung, tôi cảm thấy rằng đây là khía cạnh khác biệt của câu trả lời này đối với những câu trả lời hàng đầu hiện tại chỉ đưa ra các ví dụ. Cảm ơn đã gợi ý mặc dù :-) –  15:54:54 11/09/2015
  • 1
    Tôi nghĩ đây là câu trả lời chính xác, nhấn mạnh rằng sự vắng mặt có nghĩa là sai. Trong khi = "true" hoạt động, điều đó ngụ ý rằng = "false" sẽ hoạt động như mong muốn và nó không hoạt động. –  17:18:07 19/05/2018
36
<input ... checked />
<input ... checked="checked" />

Những điều đó đều có giá trị như nhau. Và trong JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
|
  • 1
    setAttribute sửa đổi đánh dấu DOM , việc gán thuộc tính không cần thiết. –  07:47:25 15/11/2013
  • 1
    input.setAttribute("checked")Lỗi Loại: Không thực thi 'setAttribute' bật 'tố': 2 đối số bắt buộc, nhưng chỉ có 1 mặt –  20:10:41 24/02/2017
  • 1
    @IvanRave Một số trình duyệt có giá trị lớn về điều đó, những trình duyệt khác sẽ hoạt động tốt. –  09:14:36 25/02/2017
7

bạn muốn điều này, tôi nghĩ: checked='checked'

|
5
  1. đã kiểm tra
  2. đã kiểm tra = ""
  3. đã kiểm tra = "đã kiểm tra"

    tương đương nhau;


theo hộp kiểm chỉ định '---- ⓘ đã kiểm tra = "đã kiểm tra" hoặc "" (chuỗi trống) hoặc rỗng Chỉ định rằng phần tử đại diện cho một điều khiển đã chọn .---'

|
3

Đó là một thị trấn khá điên rồ rằng cách duy nhất để làm cho kiểm tra sai là bỏ qua bất kỳ giá trị nào. Với Angular 1.x, bạn có thể làm điều này:

  <input type="radio" ng-checked="false">

điều này lành mạnh hơn rất nhiều, nếu bạn cần bỏ chọn nó.

|
2

Tôi nghĩ điều này có thể giúp:


Trước tiên, hãy đọc tất cả các thông số kỹ thuật từ Microsoft và W3.org.
Bạn sẽ thấy rằng việc cài đặt phần tử thực tế của hộp kiểm cần được thực hiện trên THUỘC TÍNH YẾU TỐ, không phải giao diện người dùng hoặc thuộc tính.
$('mycheckbox')[0].checked

Thứ hai, bạn cần biết rằng thuộc tính đã kiểm tra RETURNS một chuỗi "true", "false"
Tại sao điều này lại quan trọng? Vì bạn cần sử dụng đúng Loại. Một chuỗi, không phải boolean. Điều này cũng quan trọng khi phân tích cú pháp hộp kiểm của bạn.
$('mycheckbox')[0].checked = "true"

if($('mycheckbox')[0].checked === "true"){ //do something }

Bạn cũng cần biết rằng ATTRIBUTE "được chọn" là để đặt giá trị của hộp kiểm lúc đầu. Điều này không có tác dụng gì nhiều khi phần tử được hiển thị cho DOM. Hình dung điều này hoạt động khi trang web tải và được phân tích cú pháp ban đầu.
Tôi sẽ chọn tùy chọn của IE cho cái này:<input type="checkbox" checked="checked"/>

Cuối cùng, khía cạnh chính của sự nhầm lẫn đối với hộp kiểm là phần tử giao diện người dùng của hộp kiểm không giống với giá trị thuộc tính của phần tử. Chúng không tương quan trực tiếp. Nếu bạn làm việc trong .net, bạn sẽ phát hiện ra rằng người dùng "kiểm tra" hộp kiểm không bao giờ phản ánh giá trị bool thực tế được chuyển đến bộ điều khiển. Để đặt giao diện người dùng, tôi sử dụng cả hai $('mycheckbox').val(true);$('mycheckbox').attr('checked', 'checked');


Tóm lại, đối với một hộp kiểm đã chọn, bạn cần:
DOM ban đầu: <input type="checkbox" checked="checked">
Thuộc tính phần tử: $('mycheckbox')[0].checked = "true";
Giao diện người dùng: $('mycheckbox').val(true);$('mycheckbox').attr('checked', 'checked');

|
1

Cũng giống như tất cả các đầu vào, đầu vào này cũng có thuộc tính 'giá trị'. Nếu bạn đặt valuethuộc tính cùng với namethuộc tính, nó sẽ gửi ${name}=${value}các tiêu đề. Giả sử chúng tôi có một biểu mẫu với nhiều thứ và chúng tôi muốn người dùng quyết định vai trò của họ, chúng tôi có thể sử dụng một hộp kiểm. Cách dễ nhất là đặt thuộc tính "value" sẽ được chuyển đến máy chủ. Như thế này:

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" name="my_checkbox" value="is_person">
</form>

Máy chủ sẽ nhận được thông tin sau: my_checkbox=is_person nhưng chỉ khi hộp kiểm được chọn. Điều này sẽ là my_checkbox= nếu nó trống.

Điều này hoàn toàn giống với radiođầu vào.

Nhưng .. Tôi có cảm giác rằng đây không phải là những gì bạn đang yêu cầu ... Vì vậy, chỉ cần điền vào, tôi sẽ viết một câu trả lời khác bên dưới:

Nếu checkedthuộc tính được đặt thành bất kỳ thứ gì (thậm chí false), nó sẽ được kích hoạt, bất kể điều gì. Các checkedthuộc tính không có một giá trị xác định, nếu nó thiết lập để bất cứ điều gì nó sẽ mặc định 'true' (ngay cả khi bạn đặt nó false).

Ví dụ:

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" checked="false"> <!--Still checked-->
</form>

Sẽ được kiểm tra ngay cả khi nó được đặt thành false.

<form action="/server" method="post">
    <label>Are you a person?</label>
    <input type="checkbox" checked="asjdiasjiasdjoasi"> <!--Still checked-->
</form> 

Làm điều này cũng sẽ kiểm tra nó. Nó không quan trọng - miễn là nó được thiết lập, nó sẽ được kiểm tra.

Hy vọng điều này trả lời câu hỏi của bạn, checkedthuộc tính sẽ kiểm tra đầu vào bất kể giá trị của thuộc tính.

Bạn có thể kiểm tra nó tại đây: https://battledash-2.github.io/Live-IDE/ hoặc bất kỳ nơi nào như repl.it hoặc cục bộ.

|
-3

Chà, để sử dụng nó, tôi không nghĩ là vấn đề (tương tự như vô hiệu hóa và chỉ đọc), cá nhân tôi sử dụng check = "đã kiểm tra" nhưng nếu bạn đang cố gắng điều khiển chúng bằng JavaScript, bạn sử dụng true / false

|
  • 1
    Số là điều quan trọng (nó quan trọng đối với disabledreadonlyquá) ngay cả khi phục hồi lỗi trình duyệt là khá tốt. Nếu bạn muốn thao tác thuộc tính với JS thì bạn vẫn nên sử dụng checkedhoặc removeAttribute('checked'). Các checked tài sản mất truehay false. –  12:06:28 15/05/2014

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.