Αυτό το άρθρο δείχνει τον σκοπό, τη λειτουργικότητα και τη χρήση της ιδιότητας 'ελεγμένο' ραδιόφωνο εισόδου HTML DOM σε JavaScript.
Ποια είναι η «ελεγμένη» ιδιότητα του ραδιοφώνου εισόδου HTML DOM στο JavaScript;
Η ιδιότητα Input Radio 'checked' λειτουργεί στις φόρμες HTML και στα πεδία εισαγωγής για να ορίσετε και να ελέγξετε την κατάσταση του κουμπιού 'Radio'.
Σύνταξη (Ορισμός επιλεγμένης ιδιότητας)
ραδιοαντικείμενο. τετραγωνισμένος = αληθής | ψευδήςΣύμφωνα με την καθορισμένη σύνταξη επιστροφής, η ιδιότητα 'ελεγμένο' υποστηρίζει δύο παραμέτρους που παρατίθενται παρακάτω:
- αληθής: Αντιπροσωπεύει ότι το αντίστοιχο στοιχείο είναι ελεγμένο.
- ψευδής: Υποδεικνύει ότι το αντίστοιχο στοιχείο δεν είναι επιλεγμένο.
Σύνταξη (Επιστρεφόμενη ιδιότητα)
ραδιοαντικείμενο. τετραγωνισμένοςΣτην παραπάνω σύνταξη, το « ραδιοαντικείμενο ' αναφέρεται στο HTML ' <εισαγωγή> ' στοιχείο του οποίου ο τύπος είναι 'ραδιόφωνο'.
Ας χρησιμοποιήσουμε τις συντακτικές που ορίζονται παραπάνω για να εξηγήσουμε τη χρήση της ιδιότητας 'ελεγμένο' εισόδου ραδιοφώνου HTML DOM με τη βοήθεια δοθέντων πρακτικών παραδειγμάτων.
Παράδειγμα 1: Εφαρμογή της ιδιότητας 'ελεγμένο' ραδιοφώνου εισόδου Χρήση Βασικής Σύνταξης
Στο πρώτο παράδειγμα, το κουμπί 'Ραδιόφωνο' δημιουργείται για να ορίσει την 'ελεγμένη' ιδιότητά του χρησιμοποιώντας την καθορισμένη γενικευμένη σύνταξη.
Κώδικας HTML
Αρχικά, κοιτάξτε τον αναφερόμενο κώδικα HTML:
< Τύπος σώματος = 'text-align: center' >
< h2 > HTML Ελεγμένη ιδιότητα ραδιοφώνου εισόδου DOM h2 >
Χρώμα : < τύπος εισόδου = 'ραδιόφωνο' ταυτότητα = 'κίτρινος' > Κίτρινος < br >< br >
< κουμπί κάνοντας κλικ = 'colorCheck()' > Ελεγχος 'κίτρινος' κουμπί >
< κουμπί κάνοντας κλικ = 'colorUncheck()' > Καταργήστε την επιλογή 'κίτρινος' κουμπί >
Στις παραπάνω γραμμές κώδικα:
- Ο ' <σώμα> Η ετικέτα ' ορίζει το τμήμα σώματος που είναι ευθυγραμμισμένο με το ' κέντρο '.
- Ο ' Η ετικέτα προσδιορίζει την πρώτη υποκεφαλίδα.
- Ο ' <εισαγωγή> Η ετικέτα προσθέτει ένα κουμπί 'Ραδιόφωνο' καθορίζοντας τον τύπο εισόδου ' ραδιόφωνο 'με εκχωρημένο αναγνωριστικό' κίτρινος '.
- Ο ' <κουμπί> Η ετικέτα ' προσθέτει ένα απλό κουμπί που σχετίζεται με ένα ' στο κλικ ' συμβάν για την εκτέλεση του ' colorCheck() ' λειτουργία στην οποία θα έχετε πρόσβαση με το πάτημα του κουμπιού.
- Ομοίως, ένα άλλο « <κουμπί> Η ετικέτα ' δημιουργεί ένα κουμπί για να επικαλεστεί το ' colorΚαταργήστε την επιλογή () Λειτουργεί με το πάτημα του κουμπιού.
Κώδικας JavaScript
Στη συνέχεια, ακολουθήστε τον κώδικα JavaScript που δίνεται:
< γραφή >λειτουργία colorCheck ( ) {
έγγραφο. getElementById ( 'κίτρινος' ) . τετραγωνισμένος = αληθής ;
}
λειτουργία colorΑπεπιλέξτε ( ) {
έγγραφο. getElementById ( 'κίτρινος' ) . τετραγωνισμένος = ψευδής ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Η πρώτη λειτουργία ' colorCheck() 'χρησιμοποιεί το ' document.getElementById() ' μέθοδος ανάκτησης του κουμπιού επιλογής, συσχετίστε το ' τετραγωνισμένος ” ιδιοκτησία και ορίστε την τιμή του σε “true”.
- Από την άλλη πλευρά, η συνάρτηση ' colorΚαταργήστε την επιλογή () ' ορίζει την τιμή του ' τετραγωνισμένος ιδιότητα σε 'false' έναντι του ραδιοκουμπιού στο οποίο έχετε πρόσβαση.
Παραγωγή
Όπως φαίνεται, η έξοδος ελέγχει το κουμπί 'Ραδιόφωνο' στο κουμπί (ονομάζεται 'Έλεγχος') και καταργεί την επιλογή' στο κουμπί ('Αποεπιλογή') κλικ.
Παράδειγμα 2: Επιστροφή της «ελεγμένης» τιμής του ραδιοφώνου εισόδου
Αυτό το παράδειγμα εφαρμόζει την ιδιότητα Input Radio 'checked' για να επιστρέψει την κατάσταση του στοχευμένου κουμπιού 'Radio' ως boolean τιμή.
Κώδικας HTML
Εξετάστε τον ακόλουθο κώδικα HTML:
< Τύπος σώματος = 'text-align: center' >< h2 > HTML Ελεγμένη ιδιότητα ραδιοφώνου εισόδου DOM h2 >
Χρώμα : < τύπος εισόδου = 'ραδιόφωνο' τετραγωνισμένος = αληθής ταυτότητα = 'κίτρινος' > Κίτρινος < br >< br >
< κουμπί κάνοντας κλικ = 'colorCheck()' > Ελεγχος 'κίτρινος' κουμπί >
< p id = 'δείγμα' >< Π >
Στο παραπάνω μπλοκ κώδικα, το ' Ραδιόφωνο Δημιουργείται το κουμπί ' και η κατάσταση του ' τετραγωνισμένος 'η ιδιοκτησία έχει οριστεί σε ' αληθής '. Μετά από αυτό, ομοίως, η δηλωμένη συνάρτηση καλείται μέσω του συνημμένου ' στο κλικ ” εκδήλωση με το κουμπί.
Κώδικας JavaScript
Τώρα, εξετάστε τις ακόλουθες γραμμές κώδικα:
< γραφή >λειτουργία colorCheck ( ) {
που = έγγραφο. getElementById ( 'κίτρινος' ) . προεπιλογή ;
έγγραφο. getElementById ( 'δείγμα' ) . innerHTML = t ;
}
γραφή >
Στο παραπάνω απόσπασμα κώδικα:
- Ορίστε μια συνάρτηση με το όνομα ' colorCheck() '.
- Στον ορισμό του, εφαρμόστε το « document.getElementById() ' μέθοδος για να αποκτήσετε πρόσβαση στο κουμπί 'Ραδιόφωνο' χρησιμοποιώντας το αναγνωριστικό 'κίτρινο' και να συσχετίσετε το κουμπί ' προεπιλογή ' ιδιότητα για να ελέγξετε την προεπιλεγμένη τιμή του ' τετραγωνισμένος ' Χαρακτηριστικό.
- Τέλος, εφαρμόστε το « document.getElementById() ' μέθοδος ξανά για να ανακτήσετε την κενή παράγραφο που περιλαμβάνεται και να εμφανίσετε την κατάσταση της ιδιότητας 'ελεγμένο'.
.
Παραγωγή
Όπως αναλύθηκε, το αποτέλεσμα επιστρέφει την κατάσταση του συγκεκριμένου κουμπιού 'Ραδιόφωνο', π.χ., ' αληθής 'Κάντε κλικ στο κουμπί.
συμπέρασμα
Στο JavaScript, η ιδιότητα 'ελεγμένο' του ραδιοφώνου εισόδου HTML DOM είναι χρήσιμη για να ορίσετε και να επιστρέψετε την κατάσταση ελέγχου του κουμπιού 'Ραδιόφωνο'. Η καθορισμένη σύνταξη της ιδιότητας 'ελεγμένο' λειτουργεί σε δύο τιμές ' αληθής ' και ' ψευδής '. Από την άλλη πλευρά, η σύνταξη επιστροφής του δεν απαιτεί καμία παράμετρο. Αυτό το άρθρο κατέδειξε τον στόχο, τη λειτουργικότητα και τη χρήση της ιδιότητας 'ελεγμένο' ραδιόφωνο εισόδου HTML DOM σε JavaScript.