Giá trị phù hợp cho thuộc tính được kiểm tra của hộp kiểm HTML là gì?

Chúng ta đều biết cách hình thành một hộp kiểm đầu vào trong HTML:

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

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

<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">

Là câu trả lời mà nó không quan trọng? Tôi thấy không có bằng chứng cho câu trả lời được đánh dấu là chính xác ở đây từ chính thông số kỹ thuật :

Các hộp kiểm (và các nút radio) là các công tắc bật / tắt có thể được bật bởi người dùng. Công tắc được "bật" khi thuộc tính đã kiểm tra của phần tử điều khiển được đặt. Khi một biểu mẫu được gửi, chỉ các điều khiển hộp kiểm "bật" có thể thành công. Một số hộp kiểm trong một biểu mẫu có thể chia sẻ cùng tên điều khiển. Do đó, ví dụ, các 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.

Một nhà văn spec sẽ nói gì là câu trả lời đúng? Vui lòng cung cấp câu trả lời dựa trên bằng chứng.

Nói đúng ra, 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ẽ hỗ trợ bất kỳ giá trị nào giữa các trích dẫn. Tất cả những điều sau đây 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 đây sẽ được bỏ chọn:

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

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

Thông số 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à một thuộc tính boolean.

http://www.w3.org/TR/html5/infr Hạ tầng.html # bootolean-atts :

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

Nếu thuộc tính có mặt, giá trị của nó phải là chuỗi rỗng hoặc giá trị phù hợp không nhạy cảm với trường hợp ASCII cho tên chính tắc của thuộc tính, không có khoảng trắng ở đầu hoặc cuối.

Kết luận :

Sau đây 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" />

Sau đây là 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 ít đọc hơn. Khác, chỉ sử dụng <input checked>vì nó ngắn hơn.

<input ... checked />
<input ... checked="checked" />

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

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");

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

1. đã kiểm tra
2. đã kiểm tra = ""

3. đã kiểm tra = "đã kiểm tra"

   là tương đương;

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

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

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

đó là một cách lành mạnh hơn nhiều, nếu bạn cần làm cho nó không được kiểm tra.

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

Thứ hai, bạn cần lưu ý rằng thuộc tính được kiểm tra TRẢ LẠI một chuỗi "đúng", "sai"
Tại sao điều này lại quan trọng? Bởi vì bạn cần sử dụng đúng loại. Một chuỗi, không phải là một boolean. Điều này cũng quan trọng khi phân tích 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 nhận ra rằng ATTRIBUTE "đã kiểm tra" là để thiết lập giá trị của hộp kiểm ban đầu. Điều này không làm được gì nhiều khi phần tử được kết xuất tới DOM. Hình ảnh này hoạt động khi trang web tải và được phân tích cú pháp ban đầu.
Tôi sẽ đi với sở thích của IE về điều 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ử UI của hộp kiểm tra 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 UI, tôi sử dụng cả hai $('mycheckbox').val(true);và$('mycheckbox').attr('checked', 'checked');

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