Jak utworzyć pole wyboru z klikalną etykietą?

1020

Jak mogę utworzyć pole wyboru HTML z etykietą, którą można kliknąć (oznacza to, że kliknięcie etykiety powoduje włączenie / wyłączenie pola wyboru)?

Laurent
źródło
4
Umożliwianie klikania etykiet pól wyboru i radia - Czytałeś to?
John

Odpowiedzi:

1914

Metoda 1: Zawiń etykietę etykiety

Zawiń pole wyboru w labeltag:

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

Metoda 2: Użyj foratrybutu

Użyj foratrybutu (dopasuj pole wyboru id):

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

UWAGA : identyfikator musi być unikalny na stronie!

Wyjaśnienie

Ponieważ inne odpowiedzi nie wspominają o tym, etykieta może zawierać do 1 danych wejściowych i pomijać foratrybut, i zakłada się, że jest to dane wejściowe w nim zawarte.

Fragment z w3.org (z moim naciskiem):

[Atrybut for] jawnie wiąże definiowaną etykietę z inną kontrolką. Jeśli jest obecna, wartość tego atrybutu musi być taka sama jak wartość atrybutu id jakiejś innej kontrolki w tym samym dokumencie. W przypadku nieobecności definiowana etykieta jest powiązana z zawartością elementu.

Aby skojarzyć etykietę z inną kontrolką w sposób niejawny, element kontrolny musi znajdować się w treści elementu LABEL . W takim przypadku ETYKIETA może zawierać tylko jeden element sterujący. Sama etykieta może być umieszczona przed lub po powiązanej kontroli.

Korzystanie z tej metody ma pewne zalety w stosunku do for:

  • Nie trzeba przypisywać iddo każdego pola wyboru (świetnie!).

  • Nie trzeba używać dodatkowego atrybutu w pliku <label>.

  • Obszar klikalny wejścia jest również obszarem klikalnym etykiety, więc nie ma dwóch oddzielnych miejsc do kliknięcia, które mogą kontrolować pole wyboru - tylko jedno, bez względu na to, jak daleko od siebie <input>i rzeczywisty tekst etykiety, i bez względu na to, jaki rodzaj CSS zastosować się do tego.

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

Wesley Murch
źródło
14
Uwielbiam to, ale proszę ponownie edytować. Jest to dobre tylko w przypadku pól wyboru. Nie zachęcajmy ludzi do owijania innych danych wejściowych etykietami, ponieważ to zepsuje system gridowy i mobilność będzie trudniejsza do zdobycia
Max
1
Jeśli ktoś może wyjaśnić komentarz pozostawiony przez Johna, proszę, zrób to, ponieważ nie ma to dla mnie żadnego sensu.
Wesley Murch,
16
@John, który jest przewodnikiem po znacznikach specjalnie dla bootstrapu. Jeśli nie używasz frameworka lub używasz innej, powinno być całkowicie w porządku. Dziękuję za odpowiedź.
Wesley Murch,
3
@Jan. Na stronie, którą linkujesz, przykłady ładowania początkowego wszystkie zawijają pole wyboru z etykietą, nie widzę żadnych ostrzeżeń, jak w ogóle wskazujesz, być może nie jest to już istotne dla najnowszego ładowania początkowego.
user2144406,
2
Jak się dzisiaj dowiedziałem, nie mieszaj metody 1 i metody 2. Jeśli zawiniesz pole wyboru w etykiecie ORAZ uwzględnisz opcję for, kliknięcie etykiety nie spowoduje aktywacji pola wyboru.
BBlake,
50

Upewnij się tylko, że etykieta jest powiązana z danymi wejściowymi.

<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>
Quentin
źródło
1
Jestem zdezorientowany faktem, że nadałeś tym dwóm polom wyboru tę samą nazwę i różne wartości. Czy to celowo?
LarsH
2
@LarsH - Tak, w ten sposób tworzysz grupy pól wyboru.
Quentin
Dzięki. Patrzyłem na w3.org/wiki/HTML/Elements/input/checkbox i nie było to pomocne.
LarsH
2
Czy w PHP, czy $ _POST ['foo'] zawsze ma jednocześnie jedną z dwóch wartości? Nawet jeśli oba są zaznaczone. Co to jest grupa pól wyboru?
jeromej
2
@JeromeJ: Aby php poprawnie go obsługiwał, musisz dodać nawiasy kwadratowe do nazwy, np <input type="checkbox" name="foo[]" value="bar" ...>. : Otrzymasz tablicę zawierającą wartości wszystkich zaznaczonych pól (o tej nazwie). Na przykład $_POST['foo'][0]może być bari $_POST['foo'][1]może być baz(jeśli oba są zaznaczone).
Lewita
11

Możesz także użyć pseudoelementów CSS do wybierania i wyświetlania etykiet ze wszystkich atrybutów wartości pola wyboru (odpowiednio).
Edycja: Działa to tylko z przeglądarkami internetowymi i przeglądarkami typu flash (Chrome (ium), Safari, Opera ....), a tym samym większością przeglądarek mobilnych. Brak obsługi Firefox lub IE tutaj.
Może to być przydatne tylko podczas osadzania webkit / blink w 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 pseudoelementów będą klikalne.

Demo: http://codepen.io/mrmoje/pen/oteLl , + Istota tego

mrmoje
źródło
Prawdziwe. Gekon, Trident i gekon nie lubią tego. Działa to tylko z Webkit i Blink. Zaktualizuję odpowiedź
mrmoje,
3
Doceniony. Chociaż jest to możliwe, jest to zły sposób - nie działa w wielu przeglądarkach, co nie jest dobre dla dostępności.
James Billingham,
Pomijając kwestie kompatybilności, to rozwiązanie nie jest tak semantyczne jak najlepsza odpowiedź, ponieważ nie ma bezpośredniego powiązania w znacznikach między <label> a <input>
deadboy
„To działa na Webkit / Blink” pachnie jak błąd przy użyciu ( stackoverflow.com/questions/2587669/… ), więc może przestać działać w dowolnym momencie.
Xenos
7
<label for="vehicle">Type of Vehicle:</label>
<input type="checkbox" id="vehicle" name="vehicle" value="Bike" />
Dave Kiss
źródło
3
<label for="myInputID">myLabel</label><input type="checkbox" id="myInputID" name="myInputID />
ShaneBlake
źródło
1
Ponieważ może to być mylące dla niektórych czytelników, powinieneś zmienić wartość nameatrybutu na coś innego niż wartość, która jest obecna w atrybutach fori id, ponieważ te dwa są powiązane, podczas gdy nametak nie jest (ale to chyba jest obowiązkowe, aby zostać uwzględnionym) .
Dzhuneyt,
3

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>
Mystral
źródło
Możesz pominąć atrybuty fori idw swoim przykładzie, ponieważ labelznacznik zawiera tylko jeden element wejściowy.
Dzhuneyt,
2

To powinno ci pomóc: W3Schools - Etykiety

<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>
Jan
źródło
1
<label for="my_checkbox">Check me</label>
<input type="checkbox" name="my_checkbox" value="Car" />
Christopher Armstrong
źródło
0

Użyj labelelementu i foratrybutu, aby powiązać go z polem wyboru:

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

James Allardice
źródło
0

W Kątowa etykieta materiału z polem wyboru

<mat-checkbox>Check me!</mat-checkbox>
Arunkumar Ramasamy
źródło
-7

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');
    });
});
Anni
źródło
9
W tym celu nie trzeba używać JavaScript. Jest wbudowany w HTML.
Lasse Bunk
4
@LasseBunk, gdyby to był tylko JavaScript, ale do działania wymagana jest cała biblioteka jQuery. Zobaczmy, czy ktoś może wymyślić rozwiązanie Angular 2.
laurent