Cum pot face o comandă de comutare de la casetă de selectare clic pe etichetă text, precum și?

voturi
29

Checkboxesîn HTMLforme nu au implicite etichete cu ei. Adăugarea unei etichete explicite (un text) lângă el nu a comuta checkbox.

Cum pot face o comandă de comutare de la casetă de selectare clic pe etichetă text, precum și?

Întrebat 05/08/2008 la 12:51
sursa de către utilizator
În alte limbi...                            


8 răspunsuri

voturi
43

Dacă markup corect codul HTML, nu este nevoie de JavaScript. Codul de mai jos va permite utilizatorului să facă clic pe textul etichetei pentru a bifa caseta de selectare.

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

Pentru atribut pe link - urile elementelor de pe etichetă id atribut pe elementul de intrare și browser - ul face restul.

Acest lucru a fost de testare pentru a lucra în:

  • IE6
  • IE7
  • Firefox
Publicat 05/08/2008 la 13:00
sursa de către utilizator

voturi
17

Setați CSS displayproprietate pentru eticheta să fie un element de bloc și să utilizați în loc de div - păstrează sensul semantic al unei etichete permițând în același timp , indiferent de stilul pe care doriți.

De exemplu:

label {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #e0e0ff;
}
<label for="test">
  A ticky box! <input type="checkbox" id="test" />
</label>

Publicat 05/08/2008 la 13:52
sursa de către utilizator

voturi
3

După cum este indicat de @Gatekiller și alții, soluția corectă este <etichetă> tag-ul.

Faceți clic pe-in-the-textul este frumos, dar există un alt motiv pentru a utiliza <etichetă> tag-ul: accesibilitate. Instrumentele pe care persoanele cu deficiențe de vedere utilizează pentru a accesa web nevoie de <label> pentru a citi e-out sensul checkbox și butoane radio. Fără a <label> e, ei trebuie să ghicească pe baza textului înconjurător, și de multe ori ei a lua greșit sau trebuie să renunțe.

Este foarte frustrant să se confrunte cu o formă pe care scrie „Vă rugăm să selectați metoda dvs. de expediere, radio-Button1, radio-BUTTON2, radio-button3“.

Rețineți că accesibilitatea web este un subiect complex; <label> e sunt un pas necesar, dar acestea nu sunt suficiente pentru a garanta accesibilitatea sau conformitatea cu reglementările guvernamentale în cazul în care se aplică.

Publicat 25/08/2008 la 16:21
sursa de către utilizator

voturi
2

Ronnie,

Dacă ați fi dorit să anexați textul etichetei și caseta în interiorul unui element de înveliș, ai putea face următoarele:

<label for="surname">
    Surname
    <input type="checkbox" name="surname" id="surname" />
</label>
Publicat 05/08/2008 la 13:28
sursa de către utilizator

voturi
1

Puteți încheia caseta de selectare în etichetă:

<label style="display: block; padding: 50px 0 0 50px; background-color: pink; width: 80px; height: 80px">
  <input type="checkbox" name="surname">
</label>
Publicat 05/08/2008 la 13:25
sursa de către utilizator

voturi
0

Ai nevoie să-și încheie doar în caseta de etichetă atașată la fel ca acest

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

violă

sau puteți utiliza , de asemenea, pentru atributul de etichete și id de casuta ta ca mai jos

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

violă

Publicat 01/09/2015 la 12:10
sursa de către utilizator

voturi
-1

acest lucru ar trebui să funcționeze:

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

în cazul în care doesnt, pleae corecteaza-ma!

Publicat 09/03/2015 la 12:13
sursa de către utilizator

voturi
-2

Wrapping cu eticheta încă nu permite clic „oriunde în caseta“ - încă doar pe text! Acest lucru are loc de muncă pentru mine:

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

dar, din păcate, are o mulțime de JavaScript care este efectiv basculând de două ori.

Publicat 05/08/2008 la 13:34
sursa de către utilizator

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more