W tym artykule przedstawimy metody zaznaczania i odznaczania wszystkich pól wyboru przy użyciu JavaScript.
Jak sprawdzić i odznaczyć wszystkie pola wyboru za pomocą JavaScript?
Aby zaznaczyć i odznaczyć wszystkie pola wyboru w JavaScript, możesz zastosować:
- “ document.getElementsByName ” metoda z polami wyboru
- “ document.getElementsByName ”metoda z przyciskami
Wspomniane podejścia zostaną teraz omówione jeden po drugim!
Metoda 1: Zaznacz i odznacz wszystkie pola wyboru w JavaScript za pomocą metody „document.getElementsByName()” z „polami wyboru”
„ document.getElementsByName() Metoda zwraca elementy o określonej nazwie w swoich argumentach. Ta metoda zostanie zastosowana do pobrania wartości każdego pola wyboru za pomocą przekazanej nazwy.
Przeanalizujmy następujący przykład do demonstracji.
Przykład
Najpierw typ wejścia zostanie określony jako „ pole wyboru ” i przy każdym polu wyboru zostanie przypisana konkretna nazwa i wartość:
< typ wejścia = 'pole wyboru' Nazwa = 'tylko' wartość = 'Pyton' > Pyton < br />< typ wejścia = 'pole wyboru' Nazwa = 'tylko' wartość = 'Jawa' > Jawa < br />
< typ wejścia = 'pole wyboru' Nazwa = 'tylko' wartość = „JavaScript” > JavaScript < br />
Teraz dołącz dodatkowe pole wyboru z wartością „ Zaznacz wszystkie ” i dołącz „ na kliknięcie() ” zdarzenie z tym polem wyboru, które będzie działać w taki sposób, gdy pole wyboru zostanie kliknięte, „ checkNiezaznaczone ()” zostanie wywołana metoda z obiektem „ ten ” jako argument:
< typ wejścia = 'pole wyboru' na kliknięcie = 'zaznaczOdznacz(to)' /> Zaznacz wszystkie < br />
Następnie zdefiniuj funkcję o nazwie „ zaznaczOdznacz() ” w pliku JavaScript, ze zmienną o nazwie „ pole wyboru ” jako argument. Teraz uzyskaj dostęp do wartości pól wyboru za pomocą „ document.getElementsByName() ” i umieść wartość „ Nazwa ” jako argument.
Na koniec zastosuj „ dla ” , aby wykonać iterację wzdłuż wszystkich wartości pól wyboru i użyć „ w kratę ”, aby oznaczyć je wszystkie jako zaznaczone:
sprawdzanie funkcjiOdznacz ( pole wyboru ) {Dostawać = dokument. getElementsByName ( 'tylko' ) ;
dla ( był w = 0 ; i < Dostawać. długość ; i ++ ) {
Dostawać [ i ] . w kratę = pole wyboru. w kratę ; }
}
Jak widać, kiedy „ Zaznacz wszystkie ” pole wyboru jest zaznaczone, wszystkie pozostałe pola wyboru są również zaznaczone jako zaznaczone:
Metoda 2: Zaznacz i odznacz wszystkie pola wyboru w JavaScript za pomocą metody „document.getElementsByName()” z „przyciskami”
„ document.getElementsByName() ”, jak omówiono w poprzedniej metodzie, pobiera elementy o określonej nazwie w swoich argumentach. Może być używany do zaznaczania lub odznaczania wszystkich dodanych pól wyboru na stronie internetowej.
Spójrz na poniższy przykład do demonstracji.
Przykład
Teraz dołączymy dwa przyciski dla obu „ Sprawdza wszystko ' oraz ' Odznacz wszystko ” funkcjonalności. Następnie dołącz „ na kliknięcie ” zdarzenie z obydwoma przyciskami, które będą miały dostęp do określonych funkcji osobno:
< typ wejścia = 'przycisk' na kliknięcie = 'sprawdzać()' wartość = „Sprawdza wszystko” />< typ wejścia = 'przycisk' na kliknięcie = 'odznacz()' wartość = „Odznacza wszystkie” />
Następnie zdefiniuj funkcję o nazwie „ sprawdzać() ” i zastosuj „ document.getElementsByName ” z określoną wartością „ Nazwa ' atrybut. Następnie powtórz „ dla ” pętla wzdłuż wszystkich wartości pól wyboru omówionych w poprzedniej metodzie.
Co więcej, po kliknięciu powiązanego przycisku, „ w kratę Właściwość ” zaznaczy wszystkie pola wyboru i ustawi stan zaznaczenia jako „ PRAWDA ”:
kontrola działania ( ) {być kozą = dokument. getElementsByName ( 'sprawdzać' ) ;
dla ( był w = 0 ; i < Dostawać. długość ; i ++ ) {
Dostawać [ i ] . w kratę = PRAWDA ; }
}
Następnie zdefiniuj funkcję o nazwie „ usuń zaznaczenie() ” i dodaj w nim funkcję odwrotną, aby oznaczyć zaznaczoną właściwość pola jako „ fałszywy ”:
funkcja odznacz ( ) {być kozą = dokument. getElementsByName ( 'sprawdzać' ) ;
dla ( był w = 0 ; i < Dostawać. długość ; i ++ ) {
Dostawać [ i ] . w kratę = fałszywy ; }
}
Na wyjściu widać, że dodane przyciski działają idealnie:
Udostępniliśmy najprostsze metody zaznaczania i odznaczania wszystkich pól wyboru za pomocą JavaScript.
Wniosek
Aby zaznaczyć i usunąć zaznaczenie wszystkich pól wyboru za pomocą JavaScript, użyj „ document.getElementsByName() ” metoda z „ Pola wyboru ”, aby dodać pole wyboru i uzyskać dostęp do funkcji, co spowoduje zaznaczenie pól wyboru lub zastosować tę samą metodę z „ guziki ”, aby dołączyć dwa przyciski osobno do sprawdzania i odznaczania wszystkich określonych wartości. W tym artykule wyjaśniono metody sprawdzania i odznaczania wszystkich pól wyboru za pomocą JavaScript.