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

¿Cómo puedo crear una casilla de verificación HTML con una etiqueta en la que se pueda hacer clic (esto significa que al hacer clic en la etiqueta se activa / desactiva la casilla de verificación)?

preguntado el 09 de junio de 11 a las 10:06

Hacer clic en las etiquetas de casilla de verificación y de radio - ¿Has leído esto? -

12 Respuestas

Método 1: Envuelva la etiqueta de la etiqueta

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

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

Método 2: utilice el for Atributo

Use el for atributo (haga coincidir 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

Dado que las otras respuestas no lo mencionan, una etiqueta puede incluir hasta 1 entrada y omitir la for atributo, y se asumirá 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 está definiendo 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 se asocia 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 podrá contener . elemento de control. La propia etiqueta puede colocarse antes o después del control asociado.

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

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

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

  • El área en la que se puede hacer clic en la entrada es también 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 lejos estén los <input> y el texto de la etiqueta real, y no importa qué tipo de CSS le aplique.

Demostración con algo de 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>

Respondido el 20 de junio de 20 a las 10:06

Me encanta, pero edita de nuevo. Esto solo es válido para las casillas de verificación. No animemos a la gente a envolver sus otras entradas con etiquetas, porque eso rompe el sistema de red y la capacidad de respuesta móvil será más difícil de conseguir. Max

@Wesley. getbootstrap.com/css/#forms - no envuelva las entradas con si dificulta las cosas para la capacidad de respuesta móvil - Max

@John que es una guía de marcado específicamente para bootstrap. Si no está usando un marco, o está usando uno diferente, debería estar completamente bien. Gracias por la respuesta. - Wesley Murch

@Juan. En la página que enlaza, todos los ejemplos de bootstrap envuelven la casilla de verificación con la etiqueta, no veo ninguna advertencia como usted indica, tal vez ya no sea relevante para el último bootstrap. - user2144406

Como aprendí hoy, no mezcle el Método 1 y el Método 2. Si envuelve la casilla de verificación en una etiqueta E incluye el for, entonces hacer clic en la etiqueta no activará la casilla de verificación. - blake

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>

Respondido el 09 de junio de 11 a las 14:06

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

@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

Con PHP, ¿no hará que $ _POST ['foo'] siempre tenga uno de los dos valores máximos a la vez? Incluso si ambos lo comprobaron. ¿Qué es un grupo de casillas de verificación? - Jeromej

@JeromeJ: Para que php lo maneje correctamente, debe agregar corchetes al nombre, por ejemplo: <input type="checkbox" name="foo[]" value="bar" ...>. Esto le dará una matriz que contiene los valores de todos los comprobado cajas (que tienen este nombre). Por ejemplo $_POST['foo'][0] puede ser bar y $_POST['foo'][1] puede ser baz (si ambos están marcados). - Levita

También puede usar pseudo elementos CSS para seleccionar y mostrar sus etiquetas de todos los atributos de valor de su casilla de verificación (respectivamente).
Edit: Esto solo funcionará con navegadores webkit y basados ​​en parpadeo (Chrome (ium), Safari, Opera ...) y, por lo tanto, con la mayoría de los navegadores móviles. No Firefox o soporte de IE aquí.
Esto solo puede ser útil al incrustar webkit / blink en sus aplicaciones.

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

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

Demostración:http://codepen.io/mrmoje/pen/oteLl, + La esencia de esto

Respondido 12 Jul 21, 08:07

Verdadero. A Gecko, Trident y Gecko no parece gustarle esto. Esto funcionará solo con Webkit y Blink. Actualizaré la respuesta: mrmoje

Voto en contra. 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 existe una asociación directa en el marcado entre el y el - niño muerto

El "funciona en Webkit / Blink" huele a error al usar ( stackoverflow.com/questions/2587669/… ) por lo que puede dejar de funcionar en cualquier momento. - Xenos 

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

Respondido el 09 de junio de 11 a las 14:06

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

Respondido el 09 de junio de 11 a las 14:06

Dado que puede resultar confuso para algunos lectores, debe cambiar el name valor del atributo a algo diferente al valor que está presente en el for y id atributos, ya que estos dos están relacionados, mientras que name no lo es (creo que todavía es obligatorio incluirlo). - Dzhuneyt

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>

Respondido 06 Jul 12, 11:07

Puede omitir el for y id atributos en su ejemplo, ya que el label La etiqueta solo tiene un elemento de entrada en su interior. - Dzhuneyt

Esto debería ayudarte a: 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>

Respondido el 09 de junio de 11 a las 14:06

<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />

Respondido el 09 de junio de 11 a las 14:06

Use el label elemento, y el for atributo para asociarlo con la casilla de verificación:

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

Respondido el 09 de junio de 11 a las 14:06

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>

respondido 02 mar '21, 10:03

En etiqueta de material angular con casilla de verificación

<mat-checkbox>Check me!</mat-checkbox>

Respondido el 04 de diciembre de 19 a las 17:12

Use

<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');
    });
});

contestado el 23 de mayo de 14 a las 05:05

No es necesario utilizar JavaScript para hacer esto. Está integrado en HTML. - Litera Lasse

@LasseBunk, si solo fuera JavaScript, pero se requiere toda la biblioteca jQuery para que esto funcione. Veamos si alguien puede pensar en una solución de Angular 2. - laurent

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.