Jaka jest poprawna wartość dla zaznaczonego atrybutu pola wyboru HTML?

436

Wszyscy wiemy, jak utworzyć pole wyboru w HTML:

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

Czego nie wiem - jaka jest technicznie poprawna wartość zaznaczonego pola wyboru? Widziałem te wszystkie prace:

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

Czy odpowiedź, że to nie ma znaczenia? Widzę żadnych dowodów na odpowiedź oznaczone jako poprawne tutaj ze specyfikacją samego:

Pola wyboru (i przyciski opcji) to przełączniki on / off, które mogą być przełączane przez użytkownika. Przełącznik jest „włączony”, gdy ustawiony jest sprawdzony atrybut elementu sterującego. Po przesłaniu formularza tylko formanty „on” mogą się powieść. Kilka pól wyboru w formularzu może mieć tę samą nazwę kontrolną. Tak więc na przykład pola wyboru pozwalają użytkownikom wybrać kilka wartości dla tej samej właściwości. Element INPUT służy do utworzenia kontrolki pola wyboru.

Co powiedziałby spec spec od poprawnej odpowiedzi? Proszę podać odpowiedzi oparte na dowodach.

buley
źródło
W podsumowaniu pytania wspominasz o wartości zaznaczonego atrybutu, jednak w opisie pytania omawiasz poprawną wartość zaznaczonego pola wyboru. „Wartość” pola wyboru różni się od zaznaczonego atrybutu. Uważam, że w opisie pytania masz również na myśli wartość atrybutu, być może chcesz dostosować opis pytania. „Wartość” przeglądu pola wyboru stackoverflow.com/questions/14323899/…
melutovich,

Odpowiedzi:

451

Ściśle mówiąc, powinieneś umieścić coś, co ma sens - zgodnie ze specyfikacją tutaj najbardziej poprawna wersja to:

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

HTML, można również użyć składni pustego atrybutu , checked=""lub nawet po prostu checked(za ściślejszym XHTML, to nie jest obsługiwany ).

Jednak w rzeczywistości większość przeglądarek obsługuje niemal dowolną wartość między cytatami. Zostaną sprawdzone wszystkie następujące elementy:

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

I tylko następujące elementy zostaną odznaczone:

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

Zobacz także podobne pytanie na disabled="disabled".

Hannele
źródło
39
To jest źle. Jeśli spojrzysz na specyfikację , zobaczysz : checked (checked)co oznacza: „Sprawdzony atrybut może mieć wartość„ zaznaczone ”). Tylko checkeddopuszczalna wartość, żadna z pozostałych nie jest. Atrybuty logiczne pozwalają pominąć wszystko oprócz wartości, więc checkedjest to dopuszczalne jak również checked="checked".
Quentin
14
HTML5 zorientowane W3 strona mówi, że checked, checked=""i checked="checked"są OK. w3.org/TR/html-markup/input.checkbox.html
Ryan Williams
1
@Quentin Przepraszam, to zdanie nie ma dla mnie sensu. Czy miałeś na myśli, że możesz pominąć wszystko oprócz nazwy atrybutu? Ponieważ jeśli możesz pominąć wszystko oprócz wartości , możesz po prostu napisać "checked"bez nazwy atrybutu i sprawić, by działała poprawnie.
Hannele
4
@Quentin tl, dr: Jest to semantyka, ale pusta składnia atrybutu określa tylko nazwę atrybutu, a nie wartość .
Hannele
1
Jeśli pole wyboru zaznaczone pobyty (podczas przeładowania strony) pomimo pominięcia w logiczną / pusty atrybut checked , należy użyć autouzupełniania = „OFF” , aby zachować swoją przeglądarkę automatyczne sprawdzenie go.
uchwyt
58

Specyfikacja HTML5 :

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

Wyłączony atrybut treści jest atrybutem logicznym.

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

Obecność atrybutu logicznego na elemencie reprezentuje wartość prawdziwą, a brak atrybutu reprezentuje wartość fałszywą.

Jeśli atrybut jest obecny, jego wartością musi być pusty ciąg znaków lub wartość, która nie rozróżnia wielkości liter w kodzie ASCII dla kanonicznej nazwy atrybutu, bez początkowych lub końcowych białych znaków.

Wniosek :

Następujące są prawidłowe, równoważne i prawdziwe :

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

Następujące elementy są nieprawidłowe :

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

Brak atrybutu jest jedyną prawidłową składnią fałszu :

<input />

Rekomendacje

Jeśli zależy ci na pisaniu prawidłowego XHTML, użyj checked="checked", ponieważ <input checked>jest niepoprawny XHTML (ale poprawny HTML), a inne alternatywy są mniej czytelne. W przeciwnym razie po prostu użyj, <input checked>ponieważ jest krótszy.

Ciro Santilli
źródło
2
Postanowiłem wycofać się, aby edytować 2 i zachować specyfikację jako pierwszą. Chociaż pierwsze przykłady to ogólna droga, uważam, że jest to aspekt różnicujący tę odpowiedź w stosunku do obecnych najlepszych, które dają tylko przykłady. Dzięki za sugestię :-)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
2
Myślę, że to poprawna odpowiedź, podkreślając, że nieobecność oznacza fałsz. Chociaż = „prawda” działa, oznacza to, że = „fałsz” działałoby zgodnie z oczekiwaniami i nie działa.
aamarks
35
<input ... checked />
<input ... checked="checked" />

Te są równie ważne. I w JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
Niet the Dark Absol
źródło
4
setAttribute modyfikuje znaczniki DOM , przypisanie właściwości nie musi być konieczne.
user2864740,
input.setAttribute("checked")TypeError: Nie można wykonać polecenia „setAttribute” w „elemencie”: wymagane 2 argumenty, ale obecny tylko 1
Ivan Rave
@IvanRave Niektóre przeglądarki są pedantyczne, inne będą działać dobrze.
Niet the Dark Absol
6

chcesz tego myślę: checked='checked'

Johnny Craig
źródło
5
  1. sprawdzone
  2. zaznaczone = „”
  3. zaznaczone = „zaznaczone”

    są równoważne;


zgodnie ze specyfikacją pole wyboru „---- ⓘ zaznaczone =„ zaznaczone ”lub„ ”(pusty ciąg) lub puste Określa, że ​​element reprezentuje wybraną kontrolkę .---

wengeezhang
źródło
2

To dość szalone miasto, w którym jedynym sposobem na sprawdzenie fałszu jest pominięcie jakichkolwiek wartości. Z Angular 1.x możesz to zrobić:

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

co jest o wiele bardziej rozsądne, jeśli chcesz je odznaczyć.

Alexander Mills
źródło
2

Myślę, że to może pomóc:


Najpierw przeczytaj wszystkie specyfikacje Microsoft i W3.org.
Zobaczysz, że ustawienie rzeczywistego elementu pola wyboru należy wykonać na ELEMENT PROPERTY, a nie na interfejsie użytkownika lub atrybucie.
$('mycheckbox')[0].checked

Po drugie, musisz mieć świadomość, że zaznaczony atrybut ZWRACA ciąg „prawda”, „fałsz”
Dlaczego to takie ważne? Ponieważ musisz użyć poprawnego typu. Ciąg, nie boolean. Jest to również ważne podczas analizowania pola wyboru.
$('mycheckbox')[0].checked = "true"

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

Musisz także zdać sobie sprawę, że „zaznaczony” ATRYBUT służy do początkowego ustawienia wartości pola wyboru. Nie robi to wiele, gdy element jest renderowany do DOM. Wyobraź to sobie, gdy strona ładuje się i jest wstępnie analizowana.
Pójdę z preferencjami IE na ten:<input type="checkbox" checked="checked"/>

Wreszcie, głównym aspektem pomyłki dla pola wyboru jest to, że element interfejsu użytkownika pola wyboru nie jest taki sam, jak wartość właściwości elementu. Nie korelują bezpośrednio. Jeśli pracujesz w .net, odkryjesz, że użytkownik „zaznaczający” pole wyboru nigdy nie odzwierciedla rzeczywistej wartości bool przekazanej do kontrolera. Aby ustawić interfejs, używam zarówno $('mycheckbox').val(true);i$('mycheckbox').attr('checked', 'checked');


Krótko mówiąc, dla zaznaczonego pola wyboru potrzebujesz:
Początkowy DOM: <input type="checkbox" checked="checked">
Właściwość elementu: $('mycheckbox')[0].checked = "true";
Interfejs użytkownika: $('mycheckbox').val(true);i$('mycheckbox').attr('checked', 'checked');

Jeremy
źródło
-3

Cóż, aby go użyć, nie sądzę, że ma to znaczenie (podobnie jak wyłączone i tylko do odczytu), osobiście używam zaznaczonego = "zaznaczonego", ale jeśli próbujesz manipulować nimi za pomocą JavaScript, używasz true / false

Austin Best
źródło
5
Nie, to ma znaczenie (to ważne dla disabledi readonlyzbyt), nawet jeśli ożywienie błąd przeglądarki jest całkiem dobry. Jeśli chcesz manipulować atrybutem za pomocą JS, powinieneś nadal używać checkedlub removeAttribute('checked'). checked Nieruchomość bierze truelub false.
Quentin