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 de verificación HTML con una etiqueta en la que se puede hacer clic (esto significa que al hacer clic en la etiqueta se activa/desactiva la casilla de verificación)?
10 answers
Método 1: Wrap Label Tag
Ajuste la casilla de verificación dentro de una etiqueta label:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Método 2: Utilice el atributo for
Utilice el atributo for (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: ID debe ser único en la página!
Explicación
Dado que las otras respuestas no lo mencionan, una etiqueta puede incluir hasta 1 entrada y omitir el atributo for, y se asumirá que es para la entrada dentro de ella.
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 puede contener un elemento de control. La propia etiqueta podrá colocarse antes o después del control asociado.
El uso de 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 extra en
<label>.El área clicable de la entrada también es el área clicable de la etiqueta, por lo tanto, no hay dos lugares separados para hacer clic que puedan controlar la casilla de verificación: solo uno, sin importar cuán lejos estén el
<input>y el texto de la etiqueta real, y sin importar qué tipo de CSS aplique.
Demo 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-06 14:23:33
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 13:35:33
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 basados en webkit y blink (Chrome(ium), Safari, Opera....) y por lo tanto la mayoría de los navegadores móviles. No Firefox o IE soporte 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>
Todas las etiquetas de pseudo elemento serán se puede hacer clic.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-24 04:15:40
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 13:36:06
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 13:36:30
También funciona:
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-06 10:47:21
Esto debería ayudarte: W3Schools-Labels
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 13:44:13
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 13:37:08
Use el elemento label y el atributo for para asociarlo con la casilla de verificación:
<label for="myCheckbox">Some checkbox</label> <input type="checkbox" id="myCheckbox" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-06-09 13:37:05
Usa esto
<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');
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-23 04:54:42