Wydarzenia wyboru OnClick w JavaScript

Pole wyboru to element wejściowy HTML, który pozwala użytkownikowi wybrać jedną z kilku opcji. Podobnie jak w przypadku formularzy HTML, istnieje pole wyboru dla płci, mężczyzny lub kobiety. Lub czasami warunki muszą zostać zatwierdzone przed przesłaniem formularza. „„na kliknięcie„Zdarzenie zostanie dołączone do pola wyboru i zostanie uruchomione lub wykonane po kliknięciu pole wyboru.

W tym artykule pokazuje zdarzenie wyboru OnClick w JavaScript.

Wydarzenia wyboru OnClick w JavaScript

„„na kliknięcie”To zdarzenie, które zostanie uruchomione, gdy użytkownik sprawdzi pole wyboru. Wydarzenie OnClick zostanie dołączone do pola wyboru::

• Za pomocą atrybutu onClick w znaczniku HTML
• Stosowanie funkcji na atrybucie onClick elementu HTML w JavaScript
• Wyraźnie dodanie słuchacza zdarzeń w „Kliknij" wydarzenie

Użyjmy tych wszystkich jeden po drugim.

Przykład 1: Wydarzenie wyboru OnClick za pomocą atrybutu onClick w znaczniku HTML
Utwórz pole wyboru w pliku HTML z identyfikatorem „zgadzać się”I dołącz„na kliknięcie„Zdarzenie z nim, które wykona funkcję CheckClickfunc () Napisane w części JavaScript:

Właściwość OnClick w HTML, wywołując funkcję JavaScript

Zgadzam się z warunkami

Użyj poniższych wierszy kodu w pliku JavaScript:

funkcja CheckClickfunc ()

var wyboru = dokument.getElementById („zgadzam się”);
if (pole wyboru.sprawdzone == true)

alert („kliknięte jest kliknięcie”);

W powyższym kodzie,

• Utwórz funkcję CheckClickfunc () który należy wykonać po kliknięciu pola wyboru.
• Używając "getElementById ()„Metoda, odzyskaj pole wyboru według jego identyfikatora”zgadzać się".
• Sprawdź status pola wyboru za pomocą „sprawdzony" atrybut.
• Jeśli to jest "PRAWDA”, Pokaż wiadomość o alercie„Pole wyboru jest kliknięte".

Wyjście

Przykład 2: Wydarzenie wyboru OnClick przez zastosowanie funkcji na atrybucie onClick elementu HTML w JavaScript
W tym przykładzie JavaScript zostanie użyte do nadania wartości dla na kliknięcie atrybut elementu HTML, a nie w znaczniku HTML.

Utwórz pole wyboru i przypisz do niego identyfikator, który później zostanie dostępny w JavaScript:

Pole wyboru OnClick za pomocą JavaScript

Zgadzam się z warunkami

W poniższym etapie dostęp będzie dostępny przy użyciu jego identyfikatora ”zgadzać się”I„na kliknięcie„Atrybut zostanie do niego dołączony. Po kliknięciu wyboru zostanie wykonana zdefiniowana funkcja i zostanie wyświetlona wiadomość ostrzegawcza:

dokument.getElementById („zgadzam się”).onClick = funkcja checkClickfunc ()
alert („kliknięte jest kliknięcie”);

Odpowiednie wyjście będzie:

Przykład 3: Wydarzenie wyboru OnClick, jawnie dodając słuchacz zdarzeń w wydarzeniu „Kliknij”
Tutaj zdarzenie wyboru OnClick zostanie ustawione za pomocą JavaScript „addEventListener ()" metoda:

Pole wyboru OnClick za pomocą JavaScript przez addEventListener

Zgadzam się z warunkami

W pliku JavaScript użyj podanego kodu:

dokument.getElementById („zgadzam się”).addEventListener („kliknij”, CheckClickFunc);
funkcja checkClickfunc ()
alert („kliknięte jest kliknięcie”);

W powyższym fragmencie kodu,

• Najpierw pobieraj pole wyboru za pomocą jego identyfikatora, a następnie dołącz „addEventListener ()„Metoda, przekazując„Kliknij„Wydarzenie i funkcja”CheckClickfunc”, Który zostanie wywołany na kliknięciu pola wyboru.
• Zdefiniuj funkcję „CheckClickfunc ()”, Który zostanie uruchomiony podczas klikania pola wyboru i pokazuje komunikat ostrzegawczy:

Wyjście

Wniosek

Wydarzenia wyboru OnClick to zdarzenia wykonywane, gdy pole wyboru jest oznaczone jako „sprawdzony". Te zdarzenia nie są domyślnie stosowane w polu wyboru elementu dokumentu HTML. Dlatego użytkownik musi ręcznie dodać zdarzenia, aby wykonać określoną funkcjonalność. Istnieją trzy różne sposoby dodania „na kliknięcie„Wydarzenie i wykonanie akcji przy tym wydarzeniu za pomocą JavaScript. W tym artykule wyjaśniono te trzy metody wraz z przykładami.