Come creare una casella di controllo con un'etichetta cliccabile?

Come posso creare una casella di controllo HTML con un'etichetta su cui è possibile fare clic (ciò significa che facendo clic sull'etichetta si attiva / disattiva la casella di controllo)?

Metodo 1: avvolgere etichetta etichetta

Avvolgere la casella di controllo all'interno di un labeltag:

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

Metodo 2: utilizzare l' forattributo

Utilizzare l' forattributo (selezionare la casella di controllo id):

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

NOTA : l'ID deve essere univoco sulla pagina!

Spiegazione

Poiché le altre risposte non lo menzionano, un'etichetta può includere fino a 1 input e omettere l' forattributo, e si presumerà che sia per l'input al suo interno.

Estratto da w3.org (con la mia enfasi):

[L'attributo for] associa esplicitamente l'etichetta definita a un altro controllo. Se presente, il valore di questo attributo deve essere uguale al valore dell'attributo id di qualche altro controllo nello stesso documento. Se assente, l'etichetta che viene definita è associata al contenuto dell'elemento.

Per associare implicitamente un'etichetta a un altro controllo, l'elemento di controllo deve trovarsi all'interno del contenuto dell'elemento LABEL . In questo caso, l'ETICHETTA può contenere solo un elemento di controllo. L'etichetta stessa può essere posizionata prima o dopo il controllo associato.

L'uso di questo metodo presenta alcuni vantaggi rispetto a for:

• Non c'è bisogno di assegnare un segno iddi spunta ad ogni (fantastico!).

• Non è necessario utilizzare l'attributo extra in <label>.

• L'area cliccabile dell'input è anche l'area cliccabile dell'etichetta, quindi non ci sono due punti separati su cui fare clic per controllare la casella di controllo: solo uno, indipendentemente dalla distanza tra il <input>testo dell'etichetta e quello effettivo, e indipendentemente dal tipo di CSS applicare ad esso.

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

Assicurati solo che l'etichetta sia associata all'input.

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

Puoi anche utilizzare gli pseudo elementi CSS per selezionare e visualizzare le etichette da tutti gli attributi di valore della casella di controllo (rispettivamente).
Modifica: funzionerà solo con browser basati su webkit e lampeggianti (Chrome (ium), Safari, Opera ....) e quindi la maggior parte dei browser mobili. Nessun supporto Firefox o IE qui.
Questo può essere utile solo quando si incorpora webkit / lampeggio nelle app.

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

Tutte le etichette degli pseudo-elementi saranno cliccabili.

Demo: http://codepen.io/mrmoje/pen/oteLl , + L'essenza di esso

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

Funziona anche:

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

Questo dovrebbe aiutarti: W3Schools - Etichette

<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" />

Utilizzare l' labelelemento e l' forattributo per associarlo alla casella di controllo:

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

In etichetta materiale angolare con casella di controllo

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

Usa questo

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