¿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)?

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>

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>

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

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

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

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>

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>

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

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

En etiqueta de material angular con casilla de verificación

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

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