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


Risposte:


1916

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>


14
Lo adoro, ma per favore modifica di nuovo. Questo è utile solo per le caselle di controllo. Non incoraggiamo la gente a avvolgere gli altri input con le etichette, perché ciò rompe il sistema di griglia e la reattività mobile sarà più difficile da trovare
Max

1
Se qualcuno può spiegare il commento lasciato da John, per favore, perché non ha alcun senso per me.
Wesley Murch,

16
@John che è una guida markup specifica per bootstrap. Se non si utilizza un framework o se ne utilizza uno diverso, dovrebbe andare completamente bene. Grazie per la risposta.
Wesley Murch,

3
@John. Nella pagina che colleghi, esempi di bootstrap avvolgono tutti la casella di controllo con etichetta, non vedo alcun avviso come indichi, forse non è più rilevante per l'ultimo bootstrap.
user2144406,

2
Come ho imparato oggi, non mescolare il Metodo 1 e il Metodo 2. Se si avvolge la casella di controllo in un'etichetta E si include il per, quindi facendo clic sull'etichetta non si attiva la casella di controllo.
BBlake,

50

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>

1
Sono confuso dal fatto che hai assegnato alle due caselle lo stesso nome e valori diversi. È apposta?
LarsH,

2
@LarsH: Sì, è così che crei i gruppi di caselle di controllo.
Quentin,

Grazie. Stavo guardando w3.org/wiki/HTML/Elements/input/checkbox e non è stato utile in tal senso.
LarsH,

2
Con PHP, non renderai $ _POST ['pippo'] sempre uno dei due valori massimi alla volta? Anche se entrambi controllati. Che cos'è un gruppo di caselle di controllo?
Jeromej,

2
@JeromeJ: per PHP per gestire correttamente, è necessario aggiungere le parentesi quadre al nome, ad esempio: <input type="checkbox" name="foo[]" value="bar" ...>. Questo ti darà un array che contiene i valori di tutte le caselle selezionate (che hanno questo nome). Ad esempio $_POST['foo'][0]potrebbe essere bare $_POST['foo'][1]potrebbe essere baz(se entrambi sono selezionati).
Levita,

11

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


Vero. Gecko e Trident e gecko non sembrano gradire questo. Funzionerà solo con Webkit e Blink. Aggiornerò la risposta
mrmoje,

3
Downvoted. Sebbene sia possibile, è un brutto modo - non funziona su molti browser, non è buono per l'accessibilità.
James Billingham,

A parte i problemi di compatibilità, questa soluzione non è semantica come la risposta migliore perché non esiste un'associazione diretta nel markup tra <label> e <input>
deadboy

"Funziona su Webkit / Blink" puzza di bug usando ( stackoverflow.com/questions/2587669/… ), quindi potrebbe smettere di funzionare in qualsiasi momento.
Xenos,

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

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

1
Dal momento che può essere fonte di confusione per alcuni lettori, dovresti cambiare il namevalore dell'attributo in qualcosa di diverso dal valore presente negli attributi fore id, poiché questi due sono correlati, mentre namenon lo è (è comunque obbligatorio essere inclusi, credo) .
Dzhuneyt,

3

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>

È possibile omettere gli attributi fore idnel proprio esempio, poiché il labeltag contiene solo un elemento di input al suo interno.
Dzhuneyt,

2

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>


0

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

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


0

In etichetta materiale angolare con casella di controllo

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

-7

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

9
Non è necessario utilizzare JavaScript per farlo. È integrato in HTML.
Lasse Bunk,

4
@LasseBunk, se solo fosse solo JavaScript, ma è necessaria l'intera libreria jQuery per farlo funzionare. Vediamo se qualcuno può trovare una soluzione Angular 2.
laurent
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.