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


¿Cómo puedo crear una casilla 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)?


834
2018-06-09 13:33


origen


Respuestas:


Método 1: etiqueta de etiqueta de ajuste

Envuelva la casilla dentro de un label etiqueta:

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

Método 2: use el for Atributo

Utilizar el for atributo (coincide 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

Dado que las otras respuestas no lo mencionan, una etiqueta puede incluir hasta 1 entrada y omitir el for atributo, 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 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 está definiendo está asociada con los contenidos 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 uno elemento de control La etiqueta en sí misma puede colocarse antes o después del control asociado.

Usar este método tiene algunas ventajas sobre for:

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

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

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

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>


1594
2018-06-09 13:36



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

46
2018-06-09 13:35



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).
Editar: Esto solo funcionará con los navegadores basados ​​en webkit y blink (Chrome (ium), Safari, Opera ...) y, por lo tanto, en la mayoría de los navegadores móviles. No Firefox o soporte de IE aquí.
Esto solo puede ser útil al integrar webkit / blink en tus 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 pseudo elemento.

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


11
2018-01-29 17:07



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

7
2018-06-09 13:36



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

3
2018-06-09 13:36



Funciona también:

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

3
2017-07-06 10:47



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>

2
2018-06-09 13:44



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

1
2018-06-09 13:37



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


0
2018-06-09 13:37



Utilizar esta

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

-5
2018-05-23 04:54