Come faccio a fare una casella di controllo per passare dall'clic sul testo etichetta?

Question

Checkboxes in HTML le forme non sono impliciti etichette con loro.Aggiunta di un'etichetta explicit (testo) accanto a non passare il checkbox.

Come faccio a fare una casella di controllo per passare dall'clic sul testo etichetta?

Answer 1

Impostare il CSS display proprietà per l'etichetta deve essere un elemento di blocco e l'uso che invece di div - mantiene il significato semantico di una etichetta consentendo qualsiasi styling che ti piace.

Per esempio:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}

<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Answer 2

Se correttamente markup HTML del tuo codice, non c'è bisogno di javascript.Il codice riportato di seguito consente all'utente di fare clic sull'etichetta di testo per selezionare la casella di controllo.

<label for="surname">Surname</label>
<input type="checkbox" name="surname" id="surname" />

Il per attributo dell'elemento label link per il id attributo dell'elemento di input e il browser fa il resto.

Questo è stato il test di lavorare in:

• IE6
• IE7
• Firefox

Answer 3

Come indicato da @Gatekiller e gli altri, la soluzione corretta è il <label> tag.

Fare clic nel testo è bello, ma c'è un altro motivo per utilizzare i <label> tag:l'accessibilità.Gli strumenti ipovedenti di persone utilizzare per accedere al web i <label>s a leggere il significato di caselle di controllo e pulsanti di opzione.Senza <label>s, devono indovinare basato su testo circostante, e spesso sbagliano o hanno a rinunciare.

È molto frustrante da affrontare con una forma che legge "Si prega di selezionare il metodo di spedizione, radio-button1, radio-button2, radio-button3".

Nota che l'accessibilità del web è un argomento complesso;<label>s sono un passo necessario ma non sufficiente a garantire l'accessibilità o la conformità con i regolamenti governativi in cui si applica.

Answer 4

Ronnie,

Se si volesse racchiudere il testo dell'etichetta e la casella di controllo all'interno di un elemento wrapper, si può fare come segue:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>

Answer 5

È possibile avvolgere la vostra casella di controllo in etichetta:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>

Answer 6

Devi avvolgere la casella di controllo nella tag label, proprio come questo

 <label style="height: 10px; width: 150px; display: block; ">
  [Checkbox Label Here] <input type="checkbox"/>
 </label>

VIOLINO

o si può usare anche il per attributo di etichetta e id della casella di controllo, come di seguito

<label for="other">Other Details</label>
<input type="checkbox" id="other" />

VIOLINO

Answer 7

questo dovrebbe funzionare:

<script>
function checkbox () {
    var check = document.getElementById("myCheck").checked;
    var box = document.getElementById("myCheck")

    if (check == true) {
        box.checked = false;
    }
    else if (check == false) {
        box.checked = true;
    }
}
</script>
<input type="checkbox"><p id="myCheck" onClick="checkbox();">checkbox</p>

se non, pleae corect me!

Answer 8

Avvolgimento con l'etichetta ancora non consente di fare clic su 'ovunque nella casella' - ancora solo il testo!Questo fa il lavoro per me:

<div onclick="dob.checked=!dob.checked" class="checkbox"><input onclick="checked=!checked" id="dob" type="checkbox"/>Date of birth entry must be completed</div>

ma purtroppo ha un sacco di javascript, che è effettivamente la commutazione di due volte.