W tym artykule zademonstrowano cel, funkcjonalność i zastosowanie „sprawdzonej” właściwości HTML DOM Input Radio w JavaScript.
Co to jest „sprawdzona” właściwość HTML DOM Input Radio w JavaScript?
Właściwość „zaznaczone” radia wejściowego działa w formularzach HTML i polach wejściowych, ustawiając i sprawdzając stan przycisku „Radio”.
Składnia (ustaw zaznaczoną właściwość)
obiekt radiowy. sprawdzony = PRAWDA | FAŁSZZgodnie ze zdefiniowaną składnią zwracaną właściwość „checked” obsługuje dwa parametry wymienione poniżej:
- PRAWDA: Oznacza to, że odpowiedni element jest zaznaczony.
- FAŁSZ: Wskazuje, że odpowiedni element jest odznaczony.
Składnia (zwróć zaznaczoną właściwość)
obiekt radiowy. sprawdzony W powyższej składni „ obiekt radiowy ” odnosi się do kodu HTML „
Użyjmy wyżej zdefiniowanych składni, aby wyjaśnić użycie właściwości HTML DOM Input Radio „checked” za pomocą podanych praktycznych przykładów.
Przykład 1: Zastosowanie właściwości „zaznaczone” radia wejściowego Korzystanie z podstawowej składni
W pierwszym przykładzie przycisk „Radio” jest tworzony w celu ustawienia swojej właściwości „zaznaczone” przy użyciu zdefiniowanej uogólnionej składni.
Kod HTML
Najpierw spójrz na podany kod HTML:
< Budowa ciała = „wyrównanie tekstu: środek” >
< h2 > HTML Sprawdzona właściwość radia wejściowego DOM h2 >
Kolor : < typ wejścia = 'radio' ID = 'żółty' > Żółty < br >< br >
< przycisk po kliknięciu = „Sprawdź kolor()” > Sprawdzać 'żółty' przycisk >
< przycisk po kliknięciu = „odznacz kolor()” > Odznacz 'żółty' przycisk >
W powyższych liniach kodu:
- „
” określa sekcję ciała, która jest wyrównana do „ Centrum ”. - „ ” określa pierwszy podtytuł.
- „
” dodaje przycisk „Radio”, określając typ wejścia „ radio ” z przypisanym identyfikatorem “ żółty ”. - „
” dodaje prosty przycisk powiązany z „ na kliknięcie ” zdarzenie do wykonania „ kontrola koloru() ”, która będzie dostępna po kliknięciu przycisku. - Podobnie inny „
” tworzy przycisk wywołujący „ kolorOdznacz() ” po kliknięciu przycisku.
Kod JavaScript
Następnie postępuj zgodnie z podanym kodem JavaScript:
< scenariusz >Funkcja colorCheck ( ) {
dokument. getElementById ( 'żółty' ) . sprawdzony = PRAWDA ;
}
kolor funkcjiOdznacz ( ) {
dokument. getElementById ( 'żółty' ) . sprawdzony = FAŁSZ ;
}
scenariusz >
W powyższym fragmencie kodu:
- Pierwsza funkcja „ kontrola koloru() „wykorzystuje” document.getElementById() ”, aby pobrać przycisk radiowy, skojarz „ sprawdzony ” i ustaw jej wartość na „true”.
- Z kolei funkcja „ kolorOdznacz() ” ustawia wartość „ sprawdzony ” na „false” względem przycisku radiowego, do którego uzyskano dostęp.
Wyjście
Jak widać, dane wyjściowe sprawdzają przycisk „Radio” po kliknięciu przycisku (o nazwie „Sprawdź”) i odznaczają „przy kliknięciu przycisku („Odznacz”).
Przykład 2: Zwracanie wartości „sprawdzonego” radia wejściowego
W tym przykładzie zastosowano właściwość „zaznaczone” radia wejściowego w celu zwrócenia stanu docelowego przycisku „Radio” jako wartości logicznej.
Kod HTML
Rozważ następujący kod HTML:
< Budowa ciała = „wyrównanie tekstu: środek” >< h2 > HTML Sprawdzona właściwość radia wejściowego DOM h2 >
Kolor : < typ wejścia = 'radio' sprawdzony = PRAWDA ID = 'żółty' > Żółty < br >< br >
< przycisk po kliknięciu = „Sprawdź kolor()” > Sprawdzać 'żółty' przycisk >
< identyfikator p = 'próbka' >< P >
W powyższym bloku kodu „ Radio ” zostanie utworzony, a stan przycisku „ sprawdzony ” właściwość jest ustawiona na „ PRAWDA ”. Następnie, podobnie, podana funkcja jest wywoływana za pomocą załączonego „ na kliknięcie ” zdarzenie przyciskiem.
Kod JavaScript
Teraz rozważ następujące wiersze kodu:
< scenariusz >Funkcja colorCheck ( ) {
Gdzie = dokument. getElementById ( 'żółty' ) . domyślnie zaznaczone ;
dokument. getElementById ( 'próbka' ) . wewnętrzny HTML = T ;
}
scenariusz >
W powyższym fragmencie kodu:
- Zdefiniuj funkcję o nazwie „ kontrola koloru() ”.
- W jego definicji należy zastosować „ document.getElementById() ”, aby uzyskać dostęp do przycisku „Radio” za pomocą jego identyfikatora „żółty” i powiązać „ domyślnie zaznaczone ”, aby sprawdzić domyślną wartość właściwości „ sprawdzony ' atrybut.
- Na koniec zastosuj „ document.getElementById() ”, aby ponownie pobrać dołączony pusty akapit i wyświetlić stan właściwości „zaznaczonej”.
.
Wyjście
Po analizie wynik zwraca status danego przycisku „Radio”, tj. „ PRAWDA ” po kliknięciu przycisku.
Wniosek
W JavaScript właściwość HTML DOM Input Radio „checked” jest przydatna do ustawiania i zwracania zaznaczonego statusu przycisku „Radio”. Ustawiona składnia właściwości „checked” działa na dwóch wartościach „ PRAWDA ' I ' FAŁSZ ”. Z drugiej strony, jego składnia powrotu nie wymaga żadnego parametru. W tym artykule zademonstrowano cel, funkcjonalność i użycie „sprawdzonej” właściwości HTML DOM Input Radio w JavaScript.