476 votos

¿Cómo crear una casilla de verificación HTML con una etiqueta se puede hacer clic

¿Cómo puedo crear una casilla de verificación HTML con una etiqueta que se puede hacer clic (esto quiere decir que al hacer clic en la etiqueta se convierte en la casilla de encendido / apagado)?

958voto

Wesley Murch Puntos 48959

Método 1: Envoltura De La Etiqueta

Envuelva la casilla de verificación dentro de un label etiqueta:

<label><input type="checkbox" name="checkbox" value="value">Text</label>

Método 2: Utilizar la for de Atributo

El uso de la for de atributo (partido de la casilla de verificación id):

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

Explicación

Desde las otras respuestas no lo menciona, una etiqueta puede incluir hasta 1 entrada y omitir la for de atributo, y se supone que es para la entrada dentro de ella.

Extracto de w3.org (con el énfasis es mío):

[El atributo for] explícitamente asociados de la etiqueta se define con otro control. Cuando está presente, el valor de este atributo debe ser el mismo que el valor del atributo id de algún otro control en el mismo documento. Cuando está ausente, la etiqueta se define está asociado con el elemento del contenido.

Para asociar una etiqueta con otro control, implícitamente, el elemento de control debe estar en el contenido de la ETIQUETA de elemento. En este caso, la ETIQUETA puede contener sólo un elemento de control. La etiqueta en sí puede colocarse antes o después de que el control asociado.

El uso de este método tiene algunas ventajas sobre for:

  • No hay necesidad de asignar un id para cada casilla (genial!).

  • No hay necesidad de utilizar el atributo adicional en el <label>.

  • La entrada del área accesible también la etiqueta del área accesible, por lo que no hay dos lugares distintos a los clic que puede controlar la casilla de verificación sólo uno, no importa la distancia que separa el <input> y real de la etiqueta en el texto son, y no importa qué clase de CSS que se aplican a la misma.

Demostración con un poco de CSS: http://jsfiddle.net/qYZFJ/

30voto

Quentin Puntos 325526

Sólo asegúrese de que la etiqueta está asociada a la entrada.

 <fieldset>
  <legend>What metasyntactic variables do you like?</legend>

  <input type="checkbox" name="foo" value="bar" id="foo_bar">
  <label for="foo_bar">Bar</label>

  <input type="checkbox" name="foo" value="baz" id="foo_baz">
  <label for="foo_baz">Baz</label>
</fieldset>
 

9voto

Moje Puntos 1490

Usted también podría usar CSS pseudo elementos para recoger y mostrar las etiquetas de todos tus casilla el valor de los atributos (respectivamente).
Edit: Esto sólo funciona con el motor webkit y abrir y cerrar base de los navegadores (Chrome(ium), Safari, Opera,...) y por lo tanto la mayoría de los navegadores móviles. No Firefox o IE apoyo aquí.
Esto puede ser útil cuando la incrustación de webkit/blink en sus aplicaciones.

<input type="checkbox" value="My checkbox label value" />
<style>
[type=checkbox]:after {
    content: attr(value);
    margin: -3px 15px;
    vertical-align: top;
    white-space:nowrap;
    display: inline-block;
}
</style>

Todos los pseudo elemento de etiquetas se puede hacer clic.

Demostración:http://codepen.io/mrmoje/pen/oteLl, + el quid de La cuestión

4voto

Dave Kiss Puntos 5031
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />

2voto

ShaneBlake Puntos 4844
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: