Каково правильное значение для отмеченного атрибута флажка HTML? - PullRequest
408 голосов
/ 21 октября 2011

Мы все знаем, как сформировать флажок ввода в 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 используется создать флажок управления.

Что, по словам специалиста, является правильным ответом? Пожалуйста, предоставьте обоснованные ответы.

Ответы [ 8 ]

432 голосов
/ 21 октября 2011

Строго говоря, вы должны поместить что-то, что имеет смысл - в соответствии со спецификацией здесь , наиболее правильная версия:

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

49 голосов

HTML5 spec :

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

Отсутствие атрибута является единственным допустимым синтаксисом для false :

<input />

Рекомендация

Если вы хотите написать действительный XHTML, используйте checked="checked", поскольку <input checked> является недействительным XHTML (но допустимым HTML), а другие альтернативы менее читабельны. Иначе, просто используйте <input checked>, так как оно короче.

34 голосов
/ 21 октября 2011
<input ... checked />
<input ... checked="checked" />

Они одинаково действительны. И в JavaScript:

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
7 голосов
/ 21 октября 2011

Вы хотите это, я думаю: checked='checked'

5 голосов
/ 05 июня 2014
  1. проверено
  2. проверено = ""
  3. проверено = "проверено"

    эквивалентны;


согласно спецификации чекбокс '---- ⓘ checked = "флажок" или "" (пустая строка) или пусто Указывает, что элемент представляет выбранный элемент управления .--- '

2 голосов
/ 31 января 2019

Я думаю, что это может помочь:
<Ч /> Сначала прочтите все спецификации от Microsoft и W3.org.
Вы увидите, что установка фактического элемента флажка должна выполняться в СОБСТВЕННОСТИ ЭЛЕМЕНТА, а не в пользовательском интерфейсе или атрибуте.
$('mycheckbox')[0].checked

Во-вторых, вы должны знать, что проверенный атрибут ВОЗВРАЩАЕТ строку "true", "false"
Почему это важно? Потому что вам нужно использовать правильный тип. Строка, а не логическое значение. Это также важно при разборе вашего флажка.
$('mycheckbox')[0].checked = "true"

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

Вы также должны понимать, что «проверенный» АТРИБУТ предназначен для первоначальной установки значения флажка. Это мало что делает, когда элемент отображается в DOM. Представьте себе, как это работает, когда веб-страница загружается и анализируется изначально.
Я остановлюсь на предпочтениях IE: <input type="checkbox" checked="checked"/>

Наконец, главный аспект путаницы для флажка заключается в том, что элемент пользовательского интерфейса флажка не совпадает со значением свойства элемента. Они не коррелируют напрямую. Если вы работаете в .net, вы обнаружите, что пользователь, «проверяющий» флажок, никогда не отражает фактическое значение bool, переданное контроллеру. Для настройки пользовательского интерфейса я использую $('mycheckbox').val(true); и $('mycheckbox').attr('checked', 'checked');

<ч /> Короче говоря, для установленного флажка вам нужно:
Начальный ДОМ: <input type="checkbox" checked="checked">
Свойство элемента: $('mycheckbox')[0].checked = "true";
Пользовательский интерфейс: $('mycheckbox').val(true); и $('mycheckbox').attr('checked', 'checked');

2 голосов
/ 15 марта 2017

Это довольно сумасшедший город, единственный способ сделать флажок ложным - не указывать значения.С Angular 1.x вы можете сделать это:

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

, что намного более разумно, если вам нужно отключить его.

0 голосов
/ 21 октября 2011

Ну, чтобы использовать его, я не думаю, что это имеет значение (похоже на отключение и чтение только), лично я использую check = "checked", но если вы пытаетесь манипулировать ими с помощью JavaScript, вы используете true / false

...