¿Cómo crear una casilla de verificación con una etiqueta en la que se puede hacer clic?

Respuestas:

1916

Método 1: etiqueta de etiqueta de envoltura

Envuelva la casilla de verificación dentro de una labeletiqueta:

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

Método 2: usar el foratributo

Use el foratributo (coincida con la casilla de verificación id):

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

NOTA : ¡La identificación debe ser única en la página!

Explicación

Como las otras respuestas no lo mencionan, una etiqueta puede incluir hasta 1 entrada y omitir el foratributo, y se supondrá que es para la entrada dentro de él.

Extracto de w3.org (con mi énfasis):

[El atributo for] asocia explícitamente la etiqueta que 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 que se define está asociada con el contenido del elemento.

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

Usar este método tiene algunas ventajas sobre for:

  • No es necesario asignar un ida cada casilla de verificación (¡genial!).

  • No es necesario utilizar el atributo adicional en el <label>.

  • El área en la que se puede hacer clic en la entrada también es el área en la que se puede hacer clic en la etiqueta, por lo que no hay dos lugares separados para hacer clic que puedan controlar la casilla de verificación: solo uno, sin importar qué tan separados <input>estén el texto de la etiqueta y el real, y no importa qué tipo de CSS aplicar a ella.

Demostración con algunos CSS:

label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
<label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>

Wesley Murch
fuente
14
Me encanta, pero edita de nuevo. Esto solo es bueno para las casillas de verificación. No hay que animar a la gente a envolver sus otras entradas con etiquetas, ya que rompe el sistema de la red y la capacidad de respuesta móviles serán más difíciles de conseguir
Max
1
Si alguien puede explicar el comentario que dejó @John, por favor, porque no tiene ningún sentido para mí.
Wesley Murch
16
@ John que es una guía de marcado específicamente para bootstrap. Si no está utilizando un marco, o está utilizando uno diferente, debería estar completamente bien. Gracias por la respuesta.
Wesley Murch
3
@Juan. En la página que vincula, los ejemplos de bootstrap están marcados con una casilla de verificación, no veo ninguna advertencia como indica, tal vez ya no sea relevante para el último bootstrap.
user2144406
2
Como aprendí hoy, no mezcle el Método 1 y el Método 2. Si coloca la casilla de verificación en una etiqueta E incluye el for, entonces al hacer clic en la etiqueta no se activará la casilla de verificación.
BBlake
50

Solo asegúrese de que la etiqueta esté asociada con 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>
Quentin
fuente
1
Estoy confundido por el hecho de que le dio a las dos casillas de verificación el mismo nombre y valores diferentes. ¿Eso es a propósito?
LarsH
2
@LarsH: Sí, así es como se crean grupos de casillas de verificación.
Quentin
Gracias. Estaba mirando w3.org/wiki/HTML/Elements/input/checkbox y no fue útil en ese sentido.
LarsH
2
Con PHP, ¿no hará que $ _POST ['foo'] siempre tenga uno de los dos valores como máximo al mismo tiempo? Incluso si ambos marcados. ¿Qué es un grupo de casillas de verificación?
jeromej
2
@JeromeJ: Para php para manejar correctamente, hay que añadir entre corchetes al nombre, por ejemplo: <input type="checkbox" name="foo[]" value="bar" ...>. Esto le dará una matriz que contiene los valores de todas las casillas marcadas (que tienen este nombre). Por ejemplo, $_POST['foo'][0]podría ser bary $_POST['foo'][1]podría ser baz(si ambos están marcados).
Levite
11

También puede usar pseudo elementos CSS para elegir y mostrar sus etiquetas de todos los atributos de valor de su casilla de verificación (respectivamente).
Editar: Esto solo funcionará con webkit y navegadores basados ​​en parpadeo (Chrome (ium), Safari, Opera ...) y, por lo tanto, la mayoría de los navegadores móviles. No hay soporte para Firefox o IE aquí.
Esto solo puede ser útil al incrustar 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>

Se podrá hacer clic en todas las etiquetas de pseudoelementos.

Demostración: http://codepen.io/mrmoje/pen/oteLl , + Lo esencial

mrmoje
fuente
Cierto. A Gecko y Trident y gecko no parece gustarles esto. Esto funcionará solo con Webkit y Blink. Actualizaré la respuesta
mrmoje
3
Voto negativo Si bien es posible, es una mala manera: no funciona en muchos navegadores, no es bueno para la accesibilidad.
James Billingham
Dejando a un lado los problemas de compatibilidad, esta solución no es tan semántica como la respuesta principal porque no hay una asociación directa en el marcado entre <label> y <input>
deadboy
El "funciona en Webkit / Blink" huele a un error al usar ( stackoverflow.com/questions/2587669/… ) por lo que puede dejar de funcionar en cualquier momento.
Xenos
7
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
Dave Kiss
fuente
3
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
ShaneBlake
fuente
1
Dado que puede ser confuso para algunos lectores, debe cambiar el namevalor del atributo a algo diferente del valor que está presente en los atributos fory id, ya que estos dos están relacionados, mientras nameque no lo están (creo que es obligatorio incluirlos). .
Dzhuneyt
3

Funciona tambien:

<form>
    <label for="male"><input type="checkbox" name="male" id="male" />Male</label><br />
    <label for="female"><input type="checkbox" name="female" id="female" />Female</label>
</form>
Mystral
fuente
Puede omitir los atributos fory iden su ejemplo, ya que la labeletiqueta solo tiene un elemento de entrada dentro.
Dzhuneyt
2

Esto debería ayudarlo: W3Schools - Etiquetas

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
Juan
fuente
1
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Christopher Armstrong
fuente
0

Use el labelelemento y el foratributo para asociarlo con la casilla de verificación:

<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />

James Allardice
fuente
0

En etiqueta de material angular con casilla de verificación

<mat-checkbox>Check me!</mat-checkbox>
Arunkumar Ramasamy
fuente
-7

Utilizar este

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


$("#checkbox_lbl").click(function(){ 
    if($("#checkbox_id").is(':checked'))
        $("#checkbox_id").removAttr('checked');
    else
       $("#checkbox_id").attr('checked');
    });
});
Anni
fuente
99
No es necesario usar JavaScript para hacer esto. Está integrado en HTML.
Lasse Bunk
44
@LasseBunk, si solo fuera JavaScript, pero se requiere toda la biblioteca jQuery para que esto funcione. Veamos si alguien puede llegar a una solución Angular 2.
Laurent