Jak sprawdzić/odznaczyć pole wyboru za pomocą JavaScript

Pole wyboru to rodzaj elementu wejściowego HTML, który pozwala użytkownikowi wybrać jedną z kilku opcji. Czasami może istnieć sytuacja, w której pola wyboru muszą być sprawdzone lub niezaznaczone w przypadku wypełnienia kwestionariusza, quizu lub niektórych aplikacji, które muszą sprawdzić dowolne konkretne lub wszystkie uprawnienia jednocześnie, aby kontynuować dalsze postępowanie.

W tym zapisie opisano procedurę sprawdzania i odznaczenia pole wyboru za pomocą JavaScript.

Jak sprawdzić/odznaczyć pole wyboru za pomocą JavaScript?

Aby sprawdzić lub odznaczyć pola wyboru w JavaScript, użyj „sprawdzony" atrybut. Najpierw uzyskaj odniesienie do elementu HTML „pole wyboru”Z pomocą przypisanego„ID" używając "getElementById ()„Metoda, a następnie zastosuj„sprawdzony„Własność na jej wartości.

Przykład 1: Sprawdź/odznacz jedno pole wyboru
Najpierw utwórz plik HTML z następującymi wierszami kodu:

Kliknij przyciski, aby sprawdzić lub odznaczyć pole wyboru

Zgadzam się z warunkami i warunkami


Tak
NIE

W powyższym kodzie:

• Utwórz pole wyboru z identyfikatorem „pole wyboru„To zostanie użyte do dostępu do elementu”pole wyboru„Aby wykonywać działania.
• Utwórz dwa przyciski, „Tak" I "NIE”, Aby sprawdzić lub odznaczyć pole wyboru, które uruchomią funkcję„sprawdzać()" I "Uncheck ()”Odpowiednio na wydarzeniu kliknięcia.

Po wykonaniu powyższego kodu wyjście będzie takie:

Następnie zdefiniuj funkcje do wykonywania akcji w polu wyboru w pliku JavaScript lub znaczniku. Aby zaznaczyć pole wyboru, użyj poniższych wierszy kodu:

Funkcja Check ()
Let Input = Dokument.getElementById („pole wyboru”);
wejście.Checked = True;

W powyższym kodzie:

• Zdefiniuj funkcję „sprawdzać()„To wywoła przycisk Kliknij, aby zaznaczyć pole wyboru.
• Wewnątrz ciała funkcji uzyskaj odniesienie do pola wyboru za pomocą jego identyfikatora „pole wyboru”Z pomocą„getElementById ()„Metoda i przechowuj w zmiennej”wejście".
• Sprawdź pole wyboru, ustawiając „sprawdzony" nieruchomość "PRAWDA".

Aby odznaczyć pole wyboru, klikając „NIE„Przycisk, użyj poniżej podanego kodu:

funkcja Uncheck ()
Let Input = Dokument.getElementById („pole wyboru”);
wejście.Checked = False;

Powyższy fragment kodu:

• Zdefiniuj funkcję „Uncheck ()„To wywoła przycisk Kliknij, aby odznaczyć pole wyboru.
• Wewnątrz ciała funkcji uzyskaj odniesienie do pola wyboru za pomocą jego identyfikatora „pole wyboru”Z pomocą„getElementById ()„Metoda i przechowuj w zmiennej”wejście".
• Odznacz pole wyboru, ustawienie „sprawdzony" nieruchomość "FAŁSZ".

Na koniec zdefiniuj funkcję, aby domyślnie odznaczyć pole wyboruokno.Onload" wydarzenie:

okno.onload = function ()
okno.addEventListener („ładuj”, sprawdź, false);

Wyjście

Dane wyjściowe oznacza, że ​​pole wyboru jest sprawdzane i niezaznaczone pomyślnie podczas klikania przycisków.

Przykład 2: Sprawdź/odznacz wielokrotne pola wyboru
Zobaczmy przykład, jak sprawdzić lub odznaczyć wszystkie pola wyboru.

Najpierw utwórz plik HTML, a następnie utwórz wiele skrzynek wyboru i przycisk z identyfikatorem „przełącznik„To przełączy pole wyboru, aby sprawdzić lub odznaczyć:

Kliknij przycisk, aby sprawdzić lub odznaczyć wszystkie pola wyboru

Sprawdź lub odznacz mnie

Sprawdź lub odznacz mnie

Sprawdź lub odznacz mnie

Sprawdź lub odznacz mnie

Sprawdź lub odznacz mnie

Odpowiednie wyjście będzie:

Następnie w pliku lub znaczniku JavaScript dodaj poniższy kod, aby sprawdzić lub odznacz listę pola wyboru za pomocą jednego kliknięcia. Najpierw uzyskaj odniesienie przycisku za pomocą jego identyfikatora „przełącz” i przechowuj go w zmiennym „przycisk”, a następnie dołącz zdarzenie OnClick i wywołać funkcję „CheckAllboxes”To sprawdzi listę pole wyboru, a następnie wywoła następną funkcję„Uncheckallboxes”:

var Button = Dokument.getElementById („przełącz”);
przycisk.onClick = CheckAllBoxes;

Aby zaznaczyć pola wyboru, użyj kodu poniżej podanego poniżej

Funkcja wybierająca alboksy ()
var input = dokument.querySelelectionall ('.pole wyboru ');
dla (var i = 0; i < input.length; i++)
Wejście [i].Checked = True;

Ten.onClick = UncheckallBoxes;

W tym powyższym kodzie:

• Najpierw zdefiniuj funkcję „CheckAllboxes ()„To wywoła przycisk Kliknij, aby sprawdzić wszystkie pola wyboru.
• Wewnątrz ciała funkcji uzyskaj odniesienia wszystkich pola wyboru za pomocą przypisanych klas „pole wyboru”Z pomocą„QuerySelelection ()„Metoda i przechowuj w zmiennej”wejście".
• Iteruj pola wyboru i ustaw „sprawdzony" nieruchomość "PRAWDA„Aby sprawdzić wszystkie pola wyboru.
• Po sprawdzeniu wszystkich pola wyboru wywołaj drugą funkcję „Uncheckallboxes”W wydarzeniu kliknięcia, aby przełączyć przycisk.

Aby odznaczyć listę wyboru, klikając przycisk, użyj poniższych wierszy kodu:

funkcja UncheckallBoxes ()
var input = dokument.querySelelectionall ('.pole wyboru ');
dla (var i = 0; i < input.length; i++)
Wejście [i].Checked = False;

Ten.onClick = CheckAllBoxes;

W tym powyższym fragmencie kodu:

• Zdefiniuj funkcję „Uncheckallboxes ()„To wywoła przycisk, kliknij, aby odznaczyć wszystkie pola wyboru.
• Wewnątrz ciała funkcji uzyskaj odniesienia wszystkich pola wyboru za pomocą przypisanych klas „pole wyboru”Z pomocą„QuerySelelection ()„Metoda i przechowuj w zmiennej”wejście".
• Iteruj pola wyboru i ustaw „sprawdzony" nieruchomość "FAŁSZ„Aby odznaczyć wszystkie pola wyboru.
• Następnie wywołaj drugą funkcję „CheckAllboxes”W wydarzeniu kliknięcia, aby przełączyć przycisk.

Wyjście

Wyjście wskazuje, że lista pola wyboru jest pomyślnie sprawdzana lub niezaznaczona za pomocą jednego przycisku.

Wniosek

Aby zaznaczyć lub odznaczyć pola wyboru, użyj „sprawdzony" nieruchomość. Po otrzymaniu odniesienia elementu „pole wyboru”Korzystanie z tego„ID”Z pomocą„getElementById ()”Metoda, sprawdź pole wyboru, ustawienie„sprawdzony" przypisują "PRAWDA". Podobnie ustaw „sprawdzony" przypisują "FAŁSZ„Aby odznaczyć pole wyboru. Ten zapis opisuje procedurę sprawdzania i odznaczania pole wyboru za pomocą JavaScript.