Каково правильное значение для отмеченного атрибута флажка 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Является допустимым значением, ни один из других не. Булевы атрибуты позволяют опускать все , кроме значения , так checkedприемлемо а также checked="checked".
Квентин
14
HTML5-ориентированная W3 страница говорит , что checked, checked=""и checked="checked"все в порядке. w3.org/TR/html-markup/input.checkbox.html
Райан Уильямс
1
@Quentin Я прошу прощения, это предложение не имеет смысла для меня. Вы имели в виду, что можете опустить все, кроме имени атрибута? Потому что, если бы вы могли опустить все, кроме значения , вы могли бы просто написать "checked"без имени атрибута и заставить его работать правильно.
Ханнеле
4
@Quentin tl, dr: это семантика, но пустой синтаксис атрибута указывает только имя атрибута, а не значение .
Ханнеле
1
Если флажок остается проверяется (при перезагрузке страницы) , несмотря на пропуск в булево / пустой атрибут checked , использование автозаполнения = «выключено» , чтобы ваш браузер автоматически проверять его.
обрабатывать
58

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>как короче.

Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
источник
2
Я решил вернуться к редактированию 2 и сохранить спецификацию первым. Хотя «Сначала примеры» - это путь в целом, я чувствую, что это отличительный аспект этого ответа по сравнению с текущими топовыми, которые дают только примеры. Спасибо за предложение, хотя :-)
Сиро Сантилли 郝海东 冠状 病 六四 事件 法轮功
2
Я думаю, что это правильный ответ, подчеркивая, что отсутствие означает ложь. Хотя работает = = true, это означает, что = "false" будет работать как нужно, и это не так.
aamarks
35
<input ... checked />
<input ... checked="checked" />

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

input.checked = true;
input.setAttribute("checked");
input.setAttribute("checked","checked");
Нит Тёмный Абсол
источник
4
setAttribute изменяет разметку DOM , присваивать свойства не нужно.
user2864740
input.setAttribute("checked")Ошибка типа: не удалось выполнить setAttribute для элемента: требуется 2 аргумента, но присутствует только 1
Ivan Rave
@IvanRave Некоторые браузеры педантичны по этому поводу, другие будут работать нормально.
Niet the Dark Absol
6

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

Джонни Крейг
источник
5
  1. проверено
  2. проверено = «»
  3. проверено = «проверено»

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


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

wengeezhang
источник
2

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

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

что намного более вменяемое, если вам нужно, чтобы это не проверялось.

Александр Миллс
источник
2

Я думаю, что это может помочь:


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

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

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

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

Наконец, главный аспект путаницы для флажка заключается в том, что элемент пользовательского интерфейса флажка не совпадает со значением свойства элемента. Они не коррелируют напрямую. Если вы работаете в .net, вы обнаружите, что пользователь, «проверяющий» флажок, никогда не отражает фактическое значение bool, переданное контроллеру. Чтобы установить пользовательский интерфейс, я использую оба $('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

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

Остин Бест
источник
5
Нет , это действительно имеет значения (это важно для disabledи readonlyтоже) , даже если исправление ошибок браузера довольно хорошо. Если вы хотите манипулировать атрибутом с помощью JS, вам все равно следует использовать checkedили removeAttribute('checked'). checked Свойство принимает trueили false.
Квентин