Jak utworzyć pole wyboru HTML z klikalną etykietą
Jak utworzyć pole wyboru HTML z etykietą, którą można kliknąć (oznacza to, że kliknięcie na etykiecie włącza/wyłącza pole wyboru)?
10 answers
Metoda 1: Wrap Label Tag
Zawiń pole wyboru w znaczniku label:
<label><input type="checkbox" name="checkbox" value="value">Text</label>
Metoda 2: użyj atrybutu for
Użyj atrybutu for (dopasuj pole wyboru id):
<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>
Uwaga : ID musi być unikalne na stronie!
Wyjaśnienie
Ponieważ inne odpowiedzi nie wspominają o tym, etykieta może zawierać do 1 wejścia i pomijać atrybut for, i zakłada się, że jest to dla wejścia w nim.
Fragment od w3.org (z moim naciskiem):
[atrybut for] jawnie wiąże zdefiniowaną etykietę z inną kontrolką. Wartość tego atrybutu musi być taka sama jak wartość atrybutu id innej kontroli w tym samym dokumencie. W przypadku braku zdefiniowana etykieta jest powiązana z zawartością elementu.
Aby powiązać etykietę z inną kontrolą w sposób niejawny, element kontrolny musi znajdować się w zawartość elementu etykiety . W takim przypadku etykieta może zawierać tylko jeden element kontrolny. Sama etykieta może być umieszczona przed lub po powiązanej kontroli.
Stosowanie tej metody ma pewne zalety w stosunku do for:
Nie trzeba przypisywać
iddo każdego checkboxa (świetnie!).Nie ma potrzeby używania dodatkowego atrybutu w
<label>.Obszar klikalny wejścia jest również obszarem klikalnym etykiety, nie ma więc dwóch oddzielnych miejsc do kliknięcia, które mogłyby kontrolować pole wyboru - tylko jedno, bez względu na to, jak daleko od siebie znajdują się
<input>i rzeczywisty tekst etykiety, i bez względu na to, jakiego rodzaju CSS do niego zastosujesz.
Demo z jakimś 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/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-06 14:23:33
Upewnij się, że etykieta jest powiązana z wejściem.
<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/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-09 13:35:33
Możesz również użyć pseudo elementów CSS do wybierania i wyświetlania etykiet ze wszystkich atrybutów wartości pola wyboru (odpowiednio).
Edit: to będzie działać tylko z przeglądarkami webkit i blink (Chrome(ium), Safari, Opera....) , a tym samym większość przeglądarek mobilnych. Nie Firefox lub IE wsparcie tutaj.
Może to być przydatne tylko podczas osadzania webkit/blink na twoich aplikacjach.
<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>
Wszystkie etykiety pseudo elementów będą klikalne.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
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/doraprojects.net/template/agent.layouts/content.php on line 54
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/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-09 13:36:30
To też działa:
<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/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-06 10:47:21
To powinno ci pomóc: 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/doraprojects.net/template/agent.layouts/content.php on line 54
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/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-09 13:37:08
Użyj elementu label i atrybutu for, Aby powiązać go z pole wyboru:
<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/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-09 13:37:05
Użyj tego
<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/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-23 04:54:42