Jak zaznaczyć i odznaczyć wszystkie pola wyboru za pomocą JavaScript

Jak Zaznaczyc I Odznaczyc Wszystkie Pola Wyboru Za Pomoca Javascript

Może zaistnieć sytuacja, w której wszystkie pola wyboru będą musiały być zaznaczone lub odznaczone w przypadku dowolnego kwestionariusza lub quizu. Na przykład wymagane jest dokonywanie wielu wyborów z określonej listy pozycji lub nie dokonywanie żadnego wyboru, lub gdy trzeba zaznaczyć lub wyczyścić wybrane opcje w formularzu za jednym razem. W takich przypadkach zaznaczanie i odznaczanie wszystkich pól wyboru za pomocą JavaScript staje się bardzo wygodne i oszczędza czas.

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







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.