Qual é o valor adequado para um atributo marcado de uma caixa de seleção HTML?


436

Todos nós sabemos como formar uma entrada de caixa de seleção em HTML:

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

O que eu não sei - qual é o valor tecnicamente correto para uma caixa de seleção marcada? Eu já vi todos esses trabalhos:

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

A resposta é que isso não importa? Não vejo nenhuma evidência para a resposta marcada como correta aqui na própria especificação :

Caixas de seleção (e botões de opção) são botões liga / desliga que podem ser alternados pelo usuário. Uma opção está "ligada" quando o atributo verificado do elemento de controle está definido. Quando um formulário é enviado, apenas os controles da caixa de seleção "ativado" podem ter êxito. Várias caixas de seleção em um formulário podem compartilhar o mesmo nome de controle. Assim, por exemplo, as caixas de seleção permitem que os usuários selecionem vários valores para a mesma propriedade. O elemento INPUT é usado para criar um controle de caixa de seleção.

O que um escritor de especificações diria que é a resposta correta? Forneça respostas baseadas em evidências.


No resumo da sua pergunta, você menciona valor para o atributo marcado, no entanto, na descrição da pergunta, discute o valor correto para uma caixa de seleção marcada. O "valor" da caixa de seleção é diferente do atributo marcado. Acredito que na descrição da sua pergunta você também quis dizer o valor do atributo. Talvez você queira ajustar a descrição da pergunta. Para o "valor" de uma caixa de seleção, analise stackoverflow.com/questions/14323899/…
melutovich

Respostas:


451

Estritamente falando, você deve colocar algo que faça sentido - de acordo com as especificações aqui , a versão mais correta é:

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

Para HTML, você também pode usar a sintaxe de atributo vazio , checked=""ou mesmo simplesmente checked(para XHTML estrito, isto é não é suportado ).

Efetivamente, no entanto, a maioria dos navegadores suporta praticamente qualquer valor entre as aspas. Todos os seguintes itens serão verificados:

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

E apenas o seguinte será desmarcado:

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

Veja também esta pergunta semelhante em disabled="disabled".


39
Isto está errado. Se você olhar para a especificação , ela diz: o checked (checked)que significa "O atributo verificado pode ter o valor 'marcado'). Somente checkedé um valor aceitável, nenhum dos outros. Atributos booleanos permitem omitir tudo, exceto o valor, portanto, checkedé aceitável. bem como checked="checked"...
Quentin

14
Uma página W3 orientada para HTML5 diz que checked, checked=""e checked="checked"são OK. w3.org/TR/html-markup/input.checkbox.html
Ryan Williams

1
@ Quentin peço desculpas, essa frase não faz sentido para mim. Você quis dizer que você pode omitir tudo, exceto o nome do atributo? Porque se você pudesse omitir tudo, menos o valor , poderia simplesmente escrever "checked", sem o nome do atributo, e fazê-lo funcionar corretamente.
Hannele

4
@ Quentin tl, dr: É semântica, mas a sintaxe do atributo vazio especifica apenas o nome do atributo, não o valor .
Hannele

1
Se a caixa de seleção permanecer marcada (ao recarregar a página), apesar de omitir o atributo booleano / vazio checked , use autocomplete = "off" para impedir que o navegador verifique automaticamente.
manipula

58

Especificação HTML5 :

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

O atributo de conteúdo desativado é um atributo booleano.

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

A presença de um atributo booleano em um elemento representa o valor verdadeiro e a ausência do atributo representa o valor falso.

Se o atributo estiver presente, seu valor deverá ser a sequência vazia ou um valor que não diferencia maiúsculas de minúsculas ASCII do nome canônico do atributo, sem espaços em branco à esquerda ou à direita.

Conclusão :

A seguir, são válidos, equivalentes e verdadeiros :

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

O seguinte é inválido :

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

A ausência do atributo é a única sintaxe válida para false :

<input />

Recomendação

Se você se preocupa em escrever um XHTML válido, use checked="checked", pois ele <input checked>é XHTML inválido (mas HTML válido) e outras alternativas são menos legíveis. Senão, basta usar <input checked>, pois é mais curto.


2
Decidi reverter para editar 2 e manter as especificações primeiro. Embora o primeiro exemplo seja o caminho a seguir em geral, sinto que esse é o aspecto diferenciador dessa resposta em relação às principais atuais, que fornecem apenas exemplos. Obrigado pela sugestão :-)
Ciro Santilli escreveu

2
Eu acho que essa é a resposta correta, enfatizando que a ausência significa falsa. Enquanto = "true" funciona, isso implica que = "false" funcionaria como desejado e não.
aamarks

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

Esses são igualmente válidos. E em JavaScript:

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

4
setAttribute modifica a marcação DOM , a atribuição de propriedade não precisa.
user2864740

input.setAttribute("checked")TypeError: falha ao executar 'setAttribute' em 'Element': são necessários 2 argumentos, mas apenas 1 está presente
Ivan Rave

@IvanRave Alguns navegadores são pedantes quanto a isso, outros funcionarão bem.
Niet the Dark Absol


5
  1. verificado
  2. verificado = ""
  3. verificado = "verificado"

    são equivalentes;


de acordo com a caixa de seleção spec '---- ⓘ marcada = "marcada" ou "" (sequência vazia) ou vazia Especifica que o elemento representa um controle selecionado .---'


2

É uma cidade muito louca que a única maneira de tornar falso verificado é omitir quaisquer valores. Com o Angular 1.x, você pode fazer isso:

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

o que é muito mais sensato, se você precisar desmarcá-lo.


2

Eu acho que isso pode ajudar:


Leia primeiro todas as especificações da Microsoft e do W3.org.
Você verá que a configuração do elemento real de uma caixa de seleção precisa ser feita na ELEMENT PROPERTY, não na interface do usuário ou atributo.
$('mycheckbox')[0].checked

Em segundo lugar, você precisa estar ciente de que o atributo verificado retorna uma sequência de caracteres "true", "false"
Por que isso é importante? Porque você precisa usar o tipo correto. Uma string, não um booleano. Isso também é importante ao analisar sua caixa de seleção.
$('mycheckbox')[0].checked = "true"

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

Você também precisa perceber que o ATTRIBUTE "marcado" é para definir o valor da caixa de seleção inicialmente. Isso não faz muito quando o elemento é renderizado no DOM. Imagine isso funcionando quando a página da web é carregada e é analisada inicialmente.
Eu vou com a preferência do IE neste:<input type="checkbox" checked="checked"/>

Por fim, o principal aspecto de confusão para uma caixa de seleção é que o elemento UI da caixa de seleção não é o mesmo que o valor da propriedade do elemento. Eles não se correlacionam diretamente. Se você trabalha em .net, descobrirá que o usuário "marcando" uma caixa de seleção nunca reflete o valor real do bool passado ao controlador. Para definir a interface do usuário, eu uso ambos $('mycheckbox').val(true);e$('mycheckbox').attr('checked', 'checked');


Em resumo, para uma caixa de seleção marcada, é necessário:
DOM inicial: <input type="checkbox" checked="checked">
propriedade do elemento: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true);e$('mycheckbox').attr('checked', 'checked');


-3

Bem, para usá-lo, eu não acho que importa (semelhante a desativado e somente leitura), pessoalmente eu uso o check = = "check", mas se você está tentando manipulá-los com JavaScript, usa true / false


5
Não. Ele faz a matéria (é importante para disablede readonlymuito) mesmo se a recuperação de erro do navegador é muito bom. Se você deseja manipular o atributo com JS, ainda deve usar checkedor removeAttribute('checked'). A checked propriedade leva trueou false.
Quentin
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.