¿Cuál es el valor adecuado para un atributo marcado de una casilla de verificación HTML?


436

Todos sabemos cómo formar una entrada de casilla de verificación en HTML:

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

Lo que no sé: ¿cuál es el valor técnicamente correcto para una casilla marcada? He visto todo esto funcionar:

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

¿Es la respuesta que no importa? No veo evidencia de la respuesta marcada como correcta aquí desde la especificación en sí:

Las casillas de verificación (y los botones de opción) son interruptores de encendido / apagado que el usuario puede activar o desactivar. Un interruptor está "activado" cuando se establece el atributo marcado del elemento de control. Cuando se envía un formulario, solo los controles de casilla de verificación "en" pueden tener éxito. Varias casillas de verificación en un formulario pueden compartir el mismo nombre de control. Así, por ejemplo, las casillas de verificación permiten a los usuarios seleccionar varios valores para la misma propiedad. El elemento INPUT se usa para crear un control de casilla de verificación.

¿Cuál diría un escritor de especificaciones la respuesta correcta? Proporcione respuestas basadas en evidencia.


En el resumen de su pregunta, menciona el valor para el atributo marcado, sin embargo, en la descripción de la pregunta, discute el valor correcto para una casilla marcada. El "valor" de la casilla de verificación es diferente del atributo marcado, creo que en la descripción de su pregunta también se refería al valor del atributo, tal vez le gustaría ajustar la descripción de la pregunta. Para el "valor" de una revisión de casilla de verificación stackoverflow.com/questions/14323899/…
melutovich

Respuestas:


451

Hablando estrictamente, debe poner algo que tenga sentido; de acuerdo con las especificaciones aquí , la versión más correcta es:

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

Para HTML, también se puede utilizar la sintaxis de atributo vacío , checked=""o incluso simplemente checked(para XHTML estricto, esto es no es compatible ).

Efectivamente, sin embargo, la mayoría de los navegadores admitirán casi cualquier valor entre las comillas. Se verificará todo lo siguiente:

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

Y solo se desmarcará lo siguiente:

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

Ver también esta pregunta similar en disabled="disabled".


39
Esto está mal. Si observa la especificación , dice: lo checked (checked)que significa "El atributo marcado puede tener el valor 'verificado'). Solo checkedes un valor aceptable, ninguno de los otros lo es. Los atributos booleanos le permiten omitir todo excepto el valor, por lo que checkedes aceptable así como checked="checked".
Quentin

14
Una página HTML 5-orientado W3 dice que checked, checked=""y checked="checked"están bien. w3.org/TR/html-markup/input.checkbox.html
Ryan Williams

1
@Quentin Pido disculpas, esa frase no tiene sentido para mí. ¿Quiso decir que puede omitir todo excepto el nombre del atributo? Porque si pudiera omitir todo menos el valor , simplemente podría escribir "checked", sin el nombre del atributo, y hacer que funcione correctamente.
Hannele

44
@Quentin tl, dr: es semántica, pero la sintaxis de atributo vacía especifica solo el nombre del atributo, no el valor .
Hannele

1
Si la casilla de verificación permanece marcada (al volver a cargar la página) a pesar de omitir el atributo booleano / vacío checked , use autocomplete = "off" para evitar que su navegador la verifique automáticamente.
manejar el

58

Especificación HTML5 :

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

El atributo de contenido deshabilitado es un atributo booleano.

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

La presencia de un atributo booleano en un elemento representa el valor verdadero, y la ausencia del atributo representa el valor falso.

Si el atributo está presente, su valor debe ser la cadena vacía o un valor que sea una coincidencia entre mayúsculas y minúsculas ASCII para el nombre canónico del atributo, sin espacios en blanco iniciales o finales.

conclusión :

Los siguientes son válidos, equivalentes y verdaderos :

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

Los siguientes no son válidos :

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

La ausencia del atributo es la única sintaxis válida para falso :

<input />

Recomendación

Si le interesa escribir XHTML válido, use checked="checked", ya que <input checked>es XHTML no válido (pero HTML válido) y otras alternativas son menos legibles. De lo contrario, solo utilícelo <input checked>ya que es más corto.


2
He decidido retroceder para editar 2 y mantener la especificación primero. Si bien los ejemplos primero son el camino a seguir en general, creo que este es el aspecto diferenciador de esta respuesta con respecto a los principales actuales que dan solo ejemplos. Sin embargo, gracias por la sugerencia :-)
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

2
Creo que esta es la respuesta correcta, enfatizando que la ausencia significa falso. Mientras que = "verdadero" funciona, eso implica que = "falso" funcionaría como se desea y no lo hace.
aamarks

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

Esos son igualmente válidos. Y en JavaScript:

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

44
setAttribute modifica el marcado DOM , no es necesario que la asignación de propiedades lo haga .
user2864740

input.setAttribute("checked")TypeError: Error al ejecutar 'setAttribute' en 'Elemento': se requieren 2 argumentos, pero solo 1 presente
Ivan Rave

@IvanRave Algunos navegadores son pedantes al respecto, otros funcionarán bien.
Niet the Dark Absol


5
  1. comprobado
  2. marcado = ""
  3. marcada = "marcada"

    son equivalentes


de acuerdo con la casilla de verificación de especificaciones '---- ⓘ Checked = "Checked" o "" (cadena vacía) o vacío Especifica que el elemento representa un control seleccionado .---'


2

Es una ciudad bastante loca que la única forma de hacer que se marque falso es omitiendo cualquier valor. Con Angular 1.x, puede hacer esto:

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

lo cual es mucho más sensato, si necesita que esté sin marcar.


2

Creo que esto puede ayudar:


Primero lea todas las especificaciones de Microsoft y W3.org.
Vería que la configuración del elemento real de una casilla de verificación debe realizarse en la PROPIEDAD DEL ELEMENTO, no en la interfaz de usuario o el atributo.
$('mycheckbox')[0].checked

En segundo lugar, debe tener en cuenta que el atributo marcado DEVUELVE una cadena "verdadero", "falso"
¿Por qué es importante? Porque necesitas usar el tipo correcto. Una cadena, no un booleano. Esto también es importante al analizar su casilla de verificación.
$('mycheckbox')[0].checked = "true"

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

También debe darse cuenta de que el ATRIBUTO "marcado" es para establecer el valor de la casilla de verificación inicialmente. Esto no hace mucho una vez que el elemento se representa en el DOM. Imagine que esto funciona cuando se carga la página web y se analiza inicialmente.
Iré con la preferencia de IE en este caso:<input type="checkbox" checked="checked"/>

Por último, el aspecto principal de confusión para una casilla de verificación es que el elemento UI de la casilla de verificación no es el mismo que el valor de propiedad del elemento. No se correlacionan directamente. Si trabaja en .net, descubrirá que el usuario que "marca" una casilla de verificación nunca refleja el valor real de bool pasado al controlador. Para configurar la interfaz de usuario, utilizo ambos $('mycheckbox').val(true);y$('mycheckbox').attr('checked', 'checked');


En resumen, para una casilla de verificación marcada necesita:
DOM inicial: <input type="checkbox" checked="checked">
Propiedad del elemento: $('mycheckbox')[0].checked = "true";
UI: $('mycheckbox').val(true);y$('mycheckbox').attr('checked', 'checked');


-3

Bueno, para usarlo, no creo que sea importante (similar a deshabilitado y de solo lectura), personalmente utilizo chequeado = "verificado", pero si está tratando de manipularlos con JavaScript, usa verdadero / falso


55
No. Importa (importa disabledy readonlytambién) incluso si la recuperación de errores del navegador es bastante buena. Si desea manipular el atributo con JS, entonces aún debe usarchecked o removeAttribute('checked'). La checked propiedad toma trueo false.
Quentin
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.