formulario - label html

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

Question

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

Answer 1

Método 1: etiqueta de envoltura

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

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

Método 2: utilizar el atributo

Utilice el atributo for (coincida con el id la casilla de verificación):

<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 atributo for , y se supondrá que es para la entrada que contiene.

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 implícitamente una etiqueta con otro control, 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:

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

• No es necesario utilizar el atributo adicional en la <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 para hacer clic que puedan controlar la casilla de verificación: solo uno, sin importar qué tan separados estén <input> y el texto de la etiqueta real, y no importa de qué tipo de CSS se le aplica.

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

Answer 2

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

Answer 3

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>

Answer 4

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>

Answer 5

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).
Edición: esto solo funcionará con los navegadores webkit y blink (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 cuando incrusta 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>

Todas las etiquetas de pseudo elementos serán clicables.

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

Answer 6

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

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

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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