Каков синтаксис для логических атрибутов, например, отмеченных флажков, в HTML?

Question

Звучит как глупый вопрос, но мне интересно, каков наилучший способ заявить, что флажок отмечен / снят в HTML.

Я видел много разных примеров:

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

<input type="checkbox" checked="yes" />
<input type="checkbox" checked="no" />

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

Какие браузеры работают с какими из них, и что наиболее важно, jQuery определяет, какой флажок установлен во всех 3?

Редактировать: спецификация W3C, кажется, подразумевает, что только проверенный атрибут является правильным. Означает ли это, что check ="false" и check ="no" по-прежнему будут отмечены?

Answer 1

В HTML:

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

Для XHTML вы должны использовать пары соответствия атрибута / значения:

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

Answer 2

HTML:

Любой из них должен быть правильным, как говорится на странице W3C. checked атрибут просто должен быть установлен.

Как я написал в комментарии Короната:

На самом деле, не имеет значения, если это проверено, проверил = "что угодно" или проверил = "проверил". Он проверяет логическое значение, поэтому он либо true (установлено), либо false (не установлено).

XHTML:

Вы должны указать это, так checked="checked" является единственным действительным. Большинство браузеров, вероятно, будут правильно анализировать значения HTML, но тем не менее на вашей странице будет ошибка.

Answer 3

Согласно спецификации HTML, правильным является:

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

Я использую это, и JQuery отлично работает с ними.

Answer 4

Быстрый тест показывает, что jQuery приравнивает любое установленное значение к проверяемому.

alert( $('input:checked').length );
// Returns 5

Даже пустая строка и отрицательные значения.

Answer 5

Я был бы осторожен, используя его на Chrome, Firefox и Opera. У Chorme, кажется, есть проблема с отображением флажков, Firefox чувствителен к регистру стилей и тегов, а Opera работает нормально, но медленно обновляется. Это могут быть только версии используемых браузеров.

Кроме этого я считаю, что это должно работать <input type="checkbox" checked /> просто хорошо во всех из них. Единственная разница в том, как отдельные браузеры отображают контент на странице.

Answer 6

Спецификация W3C, по-видимому, подразумевает, что только проверенный атрибут является правильным. Означает ли это, что check = "false" и check = "no" по-прежнему будут отмечены?

Именно так. Вот почему это плохая идея checked="true" а также checked="yes"они подразумевают, что checked="false" а также checked="no" не будет проверять флажок.

Answer 7

Согласно рекомендациям W3C, ваше первое предложение верно.

Answer 8

Наличие свойства "флажок" указывает на статус. Значение не имеет значения / не требуется.

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

мое предложение

Answer 9

HTML5 spec:

http://www.w3.org/TR/html5/infrastructure.html:

Наличие логического атрибута в элементе представляет истинное значение, а отсутствие атрибута представляет ложное значение.

Если атрибут присутствует, его значение должно быть либо пустой строкой, либо значением, которое является ASCII-регистронезависимым совпадением с каноническим именем атрибута, без начальных или конечных пробелов.

Вывод:

Позволять boolean быть логическим атрибутом тега tag, лайк checked а также <input type="checkbox",

Следующее является действительным, эквивалентным и верным:

<tag boolean />
<tag boolean="" />
<tag boolean="boolean" />
<tag boolean="BoOlEaN" />

Следующие данные недействительны:

<tag boolean="0" />
<tag boolean="1" />
<tag boolean="false" />
<tag boolean="true" />

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

<tag />

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

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