Acest articol va demonstra metodele de bifare și de debifare a tuturor casetelor de selectare folosind JavaScript.
Cum să bifați și să debifați toate casetele de selectare folosind JavaScript?
Pentru a bifa și debifa toate casetele de selectare din JavaScript, puteți aplica:
- „ document.getElementsByName ” metoda cu casete de selectare
- „ document.getElementsByName ” metoda cu Butoane
Abordările menționate vor fi acum discutate una câte una!
Metoda 1: bifați și debifați toate casetele de selectare din JavaScript folosind metoda „document.getElementsByName()” cu „casetele de selectare”
„ document.getElementsByName() ” returnează elementele cu numele specificat în argumentele sale. Această metodă va fi aplicată pentru a prelua valoarea fiecărei casete de selectare cu ajutorul numelui transmis.
Să trecem prin următorul exemplu pentru demonstrație.
Exemplu
Mai întâi, tipul de intrare va fi specificat ca „ Caseta de bifat ” și un anumit nume și valoare vor fi atribuite pentru fiecare casetă de selectare:
< tip de introducere = 'Caseta de bifat' Nume = 'doar' valoare = 'Piton' > Piton < br />< tip de introducere = 'Caseta de bifat' Nume = 'doar' valoare = 'Java' > Java < br />
< tip de introducere = 'Caseta de bifat' Nume = 'doar' valoare = „JavaScript” > JavaScript < br />
Acum, includeți o casetă de selectare suplimentară cu valoarea „ Selectați toate ” și atașați un „ onclick() ” eveniment cu această casetă de selectare care va funcționa în așa fel atunci când caseta de selectare va fi bifată, „ checkNebifat ()” va fi invocată cu obiectul „ acest ” ca argument:
< tip de introducere = 'Caseta de bifat' onclick = „checkUncheck(this)” /> Selectați toate < br />
După aceea, definiți o funcție numită „ checkDebifați() ” în fișierul JavaScript, cu o variabilă numită „ Caseta de bifat ” ca argument. Acum, accesați valorile casetei de selectare folosind „ document.getElementsByName() ” și plasați valoarea „ Nume ” ca argument al acestuia.
În cele din urmă, aplicați un „ pentru ” buclă pentru a repeta de-a lungul tuturor valorilor casetei de selectare și a utiliza „ verificat ” pentru a le marca pe toate ca bifate:
verificarea funcțieiDebifați ( Caseta de bifat ) {obține = document. getElementsByName ( 'doar' ) ;
pentru ( a fost în = 0 ; i < obține. lungime ; i ++ ) {
obține [ i ] . verificat = Caseta de bifat. verificat ; }
}
După cum puteți vedea, când „ Selectați toate ” este bifată caseta de validare, toate celelalte casete de selectare sunt, de asemenea, marcate ca bifate:
Metoda 2: bifați și debifați toate casetele de selectare din JavaScript folosind metoda „document.getElementsByName()” cu „butoane”
„ document.getElementsByName() ”, așa cum sa discutat în metoda anterioară, preia elementele cu numele specificat în argumentele sale. Poate fi utilizat pentru a bifa sau debifa toate casetele de selectare adăugate pe o pagină web.
Priviți următorul exemplu pentru demonstrație.
Exemplu
Acum, vom include două butoane atât pentru „ Verifică toate ' și ' Deselecteaza tot ” funcționalități. Apoi, atașați un „ onclick ” eveniment cu ambele butoane care vor accesa separat funcțiile specificate:
< tip de introducere = 'buton' onclick = 'Verifica()' valoare = „Verifică toate” />< tip de introducere = 'buton' onclick = „debifați()” valoare = „Debifează toate” />
Apoi, definiți o funcție numită „ Verifica() ” și aplicați „ document.getElementsByName ” metoda cu valoarea specificată a “ Nume ” atribut. Apoi, repetați „ pentru ” buclă de-a lungul tuturor valorilor casetei de selectare discutate în metoda anterioară.
Mai mult, atunci când se face clic pe butonul asociat, butonul „ verificat „proprietatea va marca toate casetele de selectare și va seta starea bifată ca „ Adevărat ”:
verificarea funcției ( ) {fi capra = document. getElementsByName ( 'Verifica' ) ;
pentru ( a fost în = 0 ; i < obține. lungime ; i ++ ) {
obține [ i ] . verificat = Adevărat ; }
}
Apoi, definiți o funcție numită „ debifați() ”, și adăugați funcționalitatea inversă în ea pentru a marca proprietatea casetei bifate ca „ fals ”:
debifați funcția ( ) {fi capra = document. getElementsByName ( 'Verifica' ) ;
pentru ( a fost în = 0 ; i < obține. lungime ; i ++ ) {
obține [ i ] . verificat = fals ; }
}
Se poate vedea în rezultat că butoanele adăugate funcționează perfect:
Am oferit cele mai simple metode de a bifa și debifa toate casetele de selectare folosind JavaScript.
Concluzie
Pentru a bifa și debifa toate casetele de selectare folosind JavaScript, utilizați „ document.getElementsByName() „metoda cu „ Casete de selectare ” pentru a adăuga o casetă de selectare și a accesa funcția, ceea ce va avea ca rezultat bifarea casetelor de selectare sau a aplica aceeași metodă cu ” Butoane ” pentru a include două butoane separat pentru verificarea și debifarea tuturor valorilor specificate. Acest articol a explicat metodele de bifare și de debifare a tuturor casetelor de selectare folosind JavaScript.