rezumat: în acest tutorial, veți învăța cum să utilizați JavaScript pentru a verifica dacă este bifată o casetă de selectare, pentru a obține valorile căsuțelor selectate și pentru a selecta / deselecta toate casetele de selectare.

Verificarea dacă o casetă de selectare este bifată

Pentru a obține starea de o casetă de selectare, fie bifată sau debifată, urmați acești pași:

• în Primul rând, selectați caseta de selectare folosind selectarea DOM metode, cum ar fi getElementById() sau querySelector().
• apoi, accesați proprietatea checked a elementului căsuței de selectare., Dacă proprietatea checked este true, atunci caseta de selectare este bifată; în caz contrar, nu este.,ox este bifată, puteți folosi următorul cod:

  Code language: JavaScript (javascript)

  în Plus, poți folosi querySelector() pentru a verifica dacă :checked selector nu se întoarce null, astfel:

  Code language: JavaScript (javascript)

  Dacă o casetă de selectare nu au value atribut, valoarea sa implicită este 'on':

  Code language: HTML, XML (xml)

  Dacă ai value atributul de o casetă de selectare, veți obține întotdeauna cele 'on' string dacă caseta este bifată sau nu., De exemplu:

  Code language: JavaScript (javascript)

  a se Vedea exemplul următor:

  Obtinerea de valori de mai multe selectat casetele de selectare

  Presupunând că aveți trei casete de selectare și doriți să obțineți valorile tuturor selectat casetele de selectare:

  Code language: HTML, XML (xml)

  Pentru a realiza acest lucru, trebuie să adăugați două atribute HTML pentru fiecare casetă de selectare: name și value ., Toate cele trei casete de selectare trebuie să aibă același nume, dar valori distincte, de exemplu:

  Pentru a selecta casetele de selectare selectate, utilizați querySelector() metoda:

  Code language: JavaScript (javascript)

  Și se adună la valoarea din fiecare casetă de selectare:

  Code language: JavaScript (javascript)

  Pune-l toate împreună:

  checkboxes.js fișier:

  Verificați / Debifați toate casetele de selectare

  Uneori, poate doriți să verificați și debifați toate casetele de selectare de pe o formă., Vedeți următorul exemplu:

  când faceți clic pe butonul cu id-ul btn, toate casetele de selectare vor fi bifate dacă nu sunt și debifate dacă sunt deja bifate.

  în Primul rând, să dezvolte un check() funcția care verifică sau unchecks toate casetele de selectare bazat pe un argument de intrare:

  atunci Când faceți clic pe butonul, puteți apela check() function pentru a selecta toate casetele de selectare. Data viitoare, când faceți clic pe buton, ar trebui să debifați toate casetele de selectare.,

  pentru a face acest comutator, trebuie să realocați handler-ul click event ori de câte ori se declanșează evenimentul click.

  următoarele selectați butonul și atașați un eveniment clic ascultător:

  Code language: JavaScript (javascript)

  checkAll() funcția este după cum urmează:

  Code language: JavaScript (javascript)

  uncheckAll() funcția este:

  Cum funcționează:

  Dacă faceți clic pe butonul uncheck() funcția este invocat pentru a verifica toate casetele de selectare. Apoi, se realocă uncheckAll() funcția onclick event handler.,

  data Viitoare, dacă faceți clic pe butonul uncheckAll() funcția este invocat pentru a debifa toate casetele de selectare și realoca checkAll() funcția onclick event handler.

  Sumar

  • Nu folosesc checkbox.checked proprietatea sau :check selector pentru a determina dacă o casetă de selectare este bifată.
  • interogați atributul value pentru a obține valoarea unei casete de selectare.
  • a fost acest tutorial util ?
  • YesNo