Jak utworzyć pole wyboru z klikalną etykietą?

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

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>

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>

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

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

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

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>

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>

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

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

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

W Kątowa etykieta materiału z polem wyboru

<mat-checkbox>Check me!</mat-checkbox>

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