ค่าที่เหมาะสมสำหรับแอตทริบิวต์ที่ถูกตรวจสอบของ HTML คืออะไร

436

เราทุกคนรู้วิธีการกรอกแบบช่องทำเครื่องหมายใน HTML:

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

สิ่งที่ฉันไม่รู้ - อะไรคือค่าที่ถูกต้องทางเทคนิคสำหรับช่องทำเครื่องหมายที่เลือก? ฉันเห็นสิ่งเหล่านี้ทำงานทั้งหมด:

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

ขยายตัวอย่างข้อมูล

คำตอบนั้นไม่สำคัญหรือไม่? ผมเห็นหลักฐานสำหรับคำตอบที่ถูกต้องทำเครื่องหมายว่าไม่มีนี่จากข้อมูลจำเพาะของตัวเอง:

ช่องทำเครื่องหมาย (และปุ่มตัวเลือก) เป็นสวิตช์เปิด / ปิดที่ผู้ใช้สามารถสลับได้ สวิตช์เป็น "เปิด" เมื่อมีการตั้งค่าแอตทริบิวต์ที่ตรวจสอบขององค์ประกอบการควบคุม เมื่อมีการส่งแบบฟอร์มการควบคุมช่องทำเครื่องหมาย "กับ" เท่านั้นที่จะประสบความสำเร็จ ช่องทำเครื่องหมายหลายแห่งในแบบฟอร์มอาจใช้ชื่อตัวควบคุมเดียวกัน ตัวอย่างเช่นช่องทำเครื่องหมายอนุญาตให้ผู้ใช้เลือกหลายค่าสำหรับคุณสมบัติเดียวกัน องค์ประกอบ INPUT จะใช้ในการสร้างตัวควบคุมช่องทำเครื่องหมาย

นักเขียนสเป็คจะพูดว่าอะไรคือคำตอบที่ถูกต้อง? กรุณาให้คำตอบตามหลักฐาน

— Buley
แหล่งที่มา

ในการสรุปคำถามของคุณคุณพูดถึงค่าสำหรับแอตทริบิวต์ที่ตรวจสอบแล้วอย่างไรก็ตามในคำอธิบายคำถามคุณพูดถึงค่าที่ถูกต้องสำหรับช่องทำเครื่องหมายที่เลือก "ค่า" ของช่องทำเครื่องหมายแตกต่างจากแอตทริบิวต์ที่ตรวจสอบแล้วฉันเชื่อว่าในคำอธิบายคำถามของคุณคุณยังหมายถึงคุณค่าของแอตทริบิวต์บางทีคุณอาจต้องการปรับคำอธิบายคำถาม สำหรับ "ค่า" ของช่องทำเครื่องหมายตรวจสอบstackoverflow.com/questions/14323899/…

— melutovich

451

พูดอย่างเคร่งครัดคุณควรใส่อะไรที่สมเหตุสมผล - ตามข้อมูลจำเพาะที่นี่รุ่นที่ถูกต้องที่สุดคือ:

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

สำหรับ HTML คุณยังสามารถใช้ไวยากรณ์แอตทริบิวต์ที่ว่างเปล่า , checked=""หรือแม้กระทั่งเพียงchecked(สำหรับเข้มงวด XHTML นี้จะได้รับการสนับสนุน )

อย่างไรก็ตามอย่างมีประสิทธิภาพเบราว์เซอร์ส่วนใหญ่จะสนับสนุนค่าใด ๆ ระหว่างราคา ทั้งหมดต่อไปนี้จะถูกตรวจสอบ:

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

และจะไม่มีการทำเครื่องหมายเฉพาะรายการต่อไปนี้:

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

disabled="disabled"ดูเพิ่มเติมคำถามนี้ที่คล้ายกันใน

— Hannele
แหล่งที่มา

39

นี่เป็นสิ่งที่ผิด หากคุณดูข้อมูลจำเพาะจะแจ้งว่า: checked (checked)ซึ่งหมายความว่า "แอตทริบิวต์ที่ตรวจสอบแล้วสามารถมีค่า" ที่ตรวจสอบแล้ว ") เท่านั้นcheckedเป็นค่าที่ยอมรับได้เท่านั้นไม่มีค่าอื่นใดที่ระบุไว้แอตทริบิวต์ Booleanอนุญาตให้คุณละเว้นทุกอย่างยกเว้นค่าcheckedที่ยอมรับได้ เช่นเดียวกับchecked="checked".

— เควนติน

14

HTML5 ที่เน้นหน้า W3 กล่าวว่าchecked, checked=""และchecked="checked"จะ OK w3.org/TR/html-markup/input.checkbox.html

— Ryan Williams

1

@ คำถามในใจฉันขอโทษประโยคนั้นไม่สมเหตุสมผลสำหรับฉัน คุณหมายถึงคุณสามารถละเว้นทุกอย่างยกเว้นชื่อของแอตทริบิวต์หรือไม่ เพราะถ้าคุณสามารถละเว้นทุกอย่าง แต่คุ้มค่าคุณก็สามารถเขียน"checked"โดยไม่มีชื่อแอตทริบิวต์และมีมันทำงานอย่างถูกต้อง

— Hannele

4

TL @Quentin ดร: มันเป็นความหมาย แต่แอตทริบิวต์ที่ว่างเปล่าไวยากรณ์ระบุเพียงชื่อของแอตทริบิวต์ที่ไม่คุ้มค่า

— Hannele

1

ถ้าช่องทำเครื่องหมายยังคงถูกตรวจสอบ (เมื่อโหลดหน้าใหม่)แม้จะไม่ใช้แอตทริบิวต์บูลีน / ว่าง checkedให้ใช้autocomplete = "off"เพื่อไม่ให้เบราว์เซอร์ของคุณตรวจสอบโดยอัตโนมัติ

— จัดการ

58

ข้อมูลจำเพาะ HTML5 :

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

แอตทริบิวต์เนื้อหาที่ปิดใช้งานคือแอตทริบิวต์บูลีน

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

การมีอยู่ของแอตทริบิวต์บูลีนในองค์ประกอบหมายถึงมูลค่าที่แท้จริงและการไม่มีแอตทริบิวต์แสดงถึงค่าเท็จ

หากมีแอตทริบิวต์อยู่ค่านั้นต้องเป็นสตริงว่างหรือค่าที่ตรงกับตัวพิมพ์เล็กและตัวพิมพ์เล็ก ASCII สำหรับชื่อมาตรฐานของแอตทริบิวต์โดยไม่มีช่องว่างนำหน้าหรือต่อท้าย

สรุป :

ต่อไปนี้ถูกต้องเทียบเท่าและจริง :

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

ต่อไปนี้ไม่ถูกต้อง :

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

ไม่มีแอตทริบิวต์เป็นไวยากรณ์ที่ถูกต้องเท่านั้นสำหรับเท็จ :

<input />

คำแนะนำ

หากคุณสนใจเกี่ยวกับการเขียน XHTML ที่ถูกต้องให้ใช้ checked="checked"เพราะ<input checked>XHTML ที่ไม่ถูกต้อง (แต่ HTML ที่ถูกต้อง) และทางเลือกอื่นจะอ่านได้น้อยกว่า อื่นเพียงใช้<input checked>ตามที่สั้นกว่า

— Ciro Santilli 郝海东法轮功病六四法轮功法轮功
แหล่งที่มา

2

ฉันตัดสินใจย้อนกลับไปแก้ไข 2 และเก็บข้อมูลจำเพาะไว้ก่อน ในขณะที่ตัวอย่างแรกเป็นวิธีที่จะไปโดยทั่วไปฉันรู้สึกว่านี่เป็นแง่มุมที่แตกต่างของคำตอบนี้ด้วยความเคารพต่อคนชั้นนำในปัจจุบันที่ให้ตัวอย่างเพียง ขอขอบคุณสำหรับข้อเสนอแนะ :-)

— Ciro Santilli 郝海东冠状病六四事件法轮功

2

ฉันคิดว่านี่เป็นคำตอบที่ถูกต้องโดยเน้นว่าการขาดนั้นหมายถึงเท็จ ในขณะที่ = "จริง" ทำงานนั่นก็หมายความว่า = "เท็จ" จะทำงานได้ตามที่ต้องการและไม่เป็นเช่นนั้น

— aamarks

35

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

เหล่านั้นถูกต้องเท่าเทียมกัน และใน JavaScript:

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

— Niet the Dark Absolute
แหล่งที่มา

4

setAttribute แก้ไขมาร์กอัพ DOM การกำหนดคุณสมบัติไม่จำเป็นต้อง

— 2864740

input.setAttribute("checked")TypeError: ล้มเหลวในการเรียกใช้ 'setAttribute' บน 'Element': ต้องมี 2 อาร์กิวเมนต์ แต่มีเพียง 1 ตัวเท่านั้น

— Ivan Rave

@IvanRave เบราว์เซอร์บางตัวมีความรู้เกี่ยวกับเรื่องนี้คนอื่น ๆ จะทำงานได้ดี

— Niet the Dark Absolute

6

คุณต้องการสิ่งนี้ฉันคิดว่า: checked='checked'

— จอห์นนี่เครก
แหล่งที่มา

5

ถูกตรวจสอบ
การตรวจสอบ = ""
การตรวจสอบ = "การตรวจสอบ"

เทียบเท่า

ตามช่องทำเครื่องหมายข้อมูลจำเพาะ '---- ⓘ checked = "checked" หรือ "" (สตริงว่าง) หรือว่างเปล่าระบุว่าองค์ประกอบหมายถึงตัวควบคุมที่เลือก ---

— wengeezhang
แหล่งที่มา

2

เป็นเมืองที่ค่อนข้างบ้าที่ทางเดียวที่จะทำให้การตรวจสอบผิด ๆ คือการละเว้นค่าใด ๆ ด้วย Angular 1.x คุณสามารถทำสิ่งนี้:

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

ซึ่งเป็นสติมากขึ้นถ้าคุณต้องการที่จะทำให้มันไม่ถูกตรวจสอบ

— Alexander Mills
แหล่งที่มา

2

ฉันคิดว่านี่อาจช่วย:

ก่อนอื่นให้อ่านรายละเอียดทั้งหมดจาก Microsoft และ W3.org
คุณจะเห็นว่าการตั้งค่าองค์ประกอบที่แท้จริงของช่องทำเครื่องหมายจะต้องทำใน ELEMENT PROPERTY ไม่ใช่ UI หรือแอตทริบิวต์
$('mycheckbox')[0].checked

ประการที่สองคุณต้องระวังว่าแอททริบิวที่เลือกไว้กลับมาเป็นสตริง "true", "false"
ทำไมสิ่งนี้จึงสำคัญ? เพราะคุณต้องใช้ประเภทที่ถูกต้อง สตริงไม่ใช่บูลีน สิ่งนี้ก็มีความสำคัญเช่นกันเมื่อแยกวิเคราะห์กล่องกาเครื่องหมายของคุณ
$('mycheckbox')[0].checked = "true"

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

คุณต้องตระหนักว่า "ATTRIBUTE" ที่เลือกแล้ว "นั้นใช้สำหรับตั้งค่าของช่องทำเครื่องหมายในตอนแรก สิ่งนี้ไม่ได้ทำอะไรมากนักเมื่อองค์ประกอบถูกเรนเดอร์ไปยัง DOM รูปภาพนี้ทำงานเมื่อหน้าเว็บโหลดและแยกวิเคราะห์ในตอนแรก
ฉันจะไปกับการตั้งค่าของ IE ในอันนี้:<input type="checkbox" checked="checked"/>

สุดท้ายประเด็นหลักของความสับสนสำหรับช่องทำเครื่องหมายคือองค์ประกอบของช่องทำเครื่องหมาย UI ไม่เหมือนกับค่าคุณสมบัติขององค์ประกอบ พวกเขาไม่ได้มีความสัมพันธ์โดยตรง หากคุณทำงานใน. net คุณจะค้นพบว่าผู้ใช้ "ตรวจสอบ" ช่องทำเครื่องหมายไม่สะท้อนค่าบูลจริงที่ส่งผ่านไปยังตัวควบคุม ในการตั้งค่า UI ฉันใช้ทั้ง$('mycheckbox').val(true);และ$('mycheckbox').attr('checked', 'checked');

กล่าวโดยย่อสำหรับช่องทำเครื่องหมายที่คุณต้องใช้:
DOM เริ่มต้น: <input type="checkbox" checked="checked">
คุณสมบัติองค์ประกอบ: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true);และ$('mycheckbox').attr('checked', 'checked');

— เจเรมี
แหล่งที่มา

-3

ดีที่จะใช้มันฉันไม่คิดว่าเรื่อง (คล้ายกับปิดการใช้งานและอ่านอย่างเดียว) โดยส่วนตัวฉันใช้ checked = "ตรวจสอบ" แต่ถ้าคุณพยายามที่จะจัดการกับพวกเขาด้วย JavaScript คุณใช้จริง / เท็จ

— ออสตินยอดเยี่ยม
แหล่งที่มา

5

เลขที่มันไม่สำคัญว่า (มันเป็นเรื่องสำคัญสำหรับdisabledและreadonlyมากเกินไป) แม้ว่าการกู้คืนข้อผิดพลาดในเบราว์เซอร์เป็นรักที่ดี หากคุณต้องการจัดการกับแอ็ตทริบิวต์ด้วย JS คุณควรใช้checkedหรือremoveAttribute('checked')ยัง checked คุณสมบัติใช้เวลาหรือtrue false

— Quentin