Acest articol va descrie procedura de bifare și de debifare a casetei de selectare folosind JavaScript.
Cum să bifați/debifați caseta de selectare folosind JavaScript?
Pentru a bifa sau debifa casetele de selectare din JavaScript, utilizați „ verificat ” atribut. În primul rând, obțineți referința elementului HTML „ Caseta de bifat ” cu ajutorul celor desemnati ” id ' folosind ' getElementById() ” și apoi aplicați metoda „ verificat ” proprietate asupra valorii sale.
Exemplul 1: bifați/debifați caseta de selectare unică
Mai întâi, creați un fișier HTML, cu următoarele linii de cod:
< h3 > Faceți clic pe butoane pentru a bifa sau debifa caseta de selectare h3 >
< tip de introducere = 'Caseta de bifat' id = 'Caseta de bifat' > De acord cu termenii și condițiile < br >< br >
< tip de buton = 'buton' onclick = 'Verifica()' > da buton >
< tip de buton = 'buton' onclick = 'debifați()' > nu buton >
În codul de mai sus:
- Creați o casetă de selectare, cu id-ul „ Caseta de bifat ” care va fi folosit pentru a accesa elementul ” Caseta de bifat ” pentru a efectua acțiuni.
- Creați două butoane, „ da ' și ' nu ”, pentru a bifa sau debifa caseta de selectare care va declanșa funcția „ Verifica() ' și ' debifați() ” respectiv pe evenimentul click.
După executarea codului de mai sus, rezultatul va fi astfel:
Apoi, definiți funcțiile pentru a efectua acțiuni pe caseta de selectare din fișierul JavaScript sau eticheta. Pentru a bifa caseta de selectare, utilizați rândurile de cod de mai jos:
funcţie Verifica ( ) {
lasa intrarea = document. getElementById ( 'Caseta de bifat' ) ;
intrare. verificat = Adevărat ;
}
În codul de mai sus:
- Definiți o funcție „ Verifica() ” care va declanșa clicul butonului pentru a bifa caseta.
- În interiorul corpului funcției, obțineți referința casetei de selectare folosind id-ul acesteia „ Caseta de bifat ' cu ajutorul ' getElementById() ” și stocați-o într-o variabilă ” intrare ”.
- Bifați caseta de selectare setând „ verificat „proprietate” Adevărat ”.
Pentru a debifa caseta de selectare făcând clic pe „ nu ”, utilizați codul de mai jos:
funcţie debifați ( ) {lasa intrarea = document. getElementById ( 'Caseta de bifat' ) ;
intrare. verificat = fals ;
}
Fragmentul de cod de mai sus:
- Definiți o funcție „ debifați() ” care va declanșa clicul butonului pentru a debifa caseta de selectare.
- În interiorul corpului funcției, obțineți referința casetei de selectare folosind id-ul acesteia „ Caseta de bifat ' cu ajutorul ' getElementById() ” și stocați-o într-o variabilă ” intrare ”.
- Debifați caseta de selectare setând „ verificat „proprietate” fals ”.
În cele din urmă, definiți o funcție pentru a debifa caseta de selectare în mod implicit la încărcarea paginii utilizând „ fereastră.încărcare ” eveniment:
fereastră. onload = funcţie ( ) {fereastră. addEventListener ( 'sarcină' , Verifica , fals ) ;
}
Ieșire
Ieșirea înseamnă că caseta de selectare este bifată și debifată cu succes în timp ce faceți clic pe butoane.
Exemplul 2: bifați/debifați mai multe casete de selectare
Să vedem un exemplu despre cum să bifați sau să debifați toate casetele de selectare în același timp.
Mai întâi, creați un fișier HTML, apoi creați mai multe casete de selectare și un buton cu id-ul „ comutare ” care va comuta caseta de selectare pentru a bifa sau debifa:
< h3 > Faceți clic pe butonul pentru a bifa sau debifa toate casetele de selectare h3 >< tip de introducere = 'Caseta de bifat' clasă = 'Caseta de bifat' > Bifează-mă sau debifează-mă < br >
< tip de introducere = 'Caseta de bifat' clasă = 'Caseta de bifat' > Bifează-mă sau debifează-mă < br >
< tip de introducere = 'Caseta de bifat' clasă = 'Caseta de bifat' > Bifează-mă sau debifează-mă < br >
< tip de introducere = 'Caseta de bifat' clasă = 'Caseta de bifat' > Bifează-mă sau debifează-mă < br >
< tip de introducere = 'Caseta de bifat' clasă = 'Caseta de bifat' > Bifează-mă sau debifează-mă < br >< br >
< tip de introducere = 'buton' id = 'comutare' valoare = „Faceți clic pentru a comuta casetele de selectare” >
Ieșirea corespunzătoare va fi:
După aceea, într-un fișier JavaScript sau etichetă