Αυτή η εγγραφή θα περιγράφει τη διαδικασία ελέγχου και αποεπιλογής του πλαισίου ελέγχου χρησιμοποιώντας JavaScript.
Πώς να ελέγξετε/αποεπιλέξετε το πλαίσιο ελέγχου χρησιμοποιώντας JavaScript;
Για να επιλέξετε ή να αποεπιλέξετε τα πλαίσια ελέγχου στο JavaScript, χρησιμοποιήστε το ' τετραγωνισμένος ' Χαρακτηριστικό. Πρώτα, λάβετε την αναφορά του στοιχείου HTML ' πλαίσιο ελέγχου 'με τη βοήθεια των ανατεθέντων' ταυτότητα ' χρησιμοποιώντας το ' getElementById() μέθοδος ' και, στη συνέχεια, εφαρμόστε το ' τετραγωνισμένος ” ακίνητο στην αξία του.
Παράδειγμα 1: Επιλέξτε/Αποεπιλέξτε το Μεμονωμένο πλαίσιο ελέγχου
Αρχικά, δημιουργήστε ένα αρχείο HTML, με τις ακόλουθες γραμμές κώδικα:
< h3 > Κάντε κλικ στα κουμπιά για να επιλέξετε ή να αποεπιλέξετε το πλαίσιο ελέγχου h3 >
< τύπος εισόδου = 'πλαίσιο ελέγχου' ταυτότητα = 'πλαίσιο ελέγχου' > Συμφωνείτε με τους όρους και τις προϋποθέσεις < br >< br >
< τύπο κουμπιού = 'κουμπί' στο κλικ = 'έλεγχος()' > Ναί κουμπί >
< τύπο κουμπιού = 'κουμπί' στο κλικ = 'αποεπιλογή()' > Όχι κουμπί >
Στον παραπάνω κώδικα:
- Δημιουργήστε ένα πλαίσιο ελέγχου, με το αναγνωριστικό ' πλαίσιο ελέγχου ' που θα χρησιμοποιηθεί για πρόσβαση στο στοιχείο ' πλαίσιο ελέγχου ” για να εκτελέσετε ενέργειες.
- Δημιουργήστε δύο κουμπιά, ' Ναί ' και ' Όχι ”, για να επιλέξετε ή να αποεπιλέξετε το πλαίσιο ελέγχου που θα ενεργοποιήσει τη λειτουργία έλεγχος() ' και ' καταργήστε την επιλογή () ” αντίστοιχα στο συμβάν κλικ.
Μετά την εκτέλεση του παραπάνω κώδικα, η έξοδος θα είναι η εξής:
Στη συνέχεια, ορίστε τις συναρτήσεις για την εκτέλεση ενεργειών στο πλαίσιο ελέγχου στο αρχείο JavaScript ή στην ετικέτα. Για να επιλέξετε το πλαίσιο ελέγχου, χρησιμοποιήστε τις παρακάτω γραμμές κώδικα:
λειτουργία έλεγχος ( ) {
αφήστε την εισαγωγή = έγγραφο. getElementById ( 'πλαίσιο ελέγχου' ) ;
εισαγωγή. τετραγωνισμένος = αληθής ;
}
Στον παραπάνω κώδικα:
- Ορίστε μια συνάρτηση ' έλεγχος() ' που θα ενεργοποιήσει το κουμπί κλικ για να επιλέξετε το πλαίσιο ελέγχου.
- Μέσα στο σώμα της συνάρτησης, λάβετε την αναφορά του πλαισίου ελέγχου χρησιμοποιώντας το αναγνωριστικό της ' πλαίσιο ελέγχου ' με τη βοήθεια του ' getElementById() ' μέθοδος και αποθήκευση σε μια μεταβλητή ' εισαγωγή '.
- Επιλέξτε το πλαίσιο ελέγχου ορίζοντας το ' τετραγωνισμένος 'περιουσία' αληθής '.
Για να καταργήσετε την επιλογή του πλαισίου ελέγχου κάνοντας κλικ στο ' Όχι κουμπί ', χρησιμοποιήστε τον παρακάτω κώδικα:
λειτουργία καταργήστε την επιλογή ( ) {αφήστε την εισαγωγή = έγγραφο. getElementById ( 'πλαίσιο ελέγχου' ) ;
εισαγωγή. τετραγωνισμένος = ψευδής ;
}
Το παραπάνω απόσπασμα κώδικα:
- Ορίστε μια συνάρτηση ' καταργήστε την επιλογή () ' που θα ενεργοποιήσει το κουμπί κλικ για να καταργήσετε την επιλογή του πλαισίου ελέγχου.
- Μέσα στο σώμα της συνάρτησης, λάβετε την αναφορά του πλαισίου ελέγχου χρησιμοποιώντας το αναγνωριστικό της ' πλαίσιο ελέγχου ' με τη βοήθεια του ' getElementById() ' μέθοδος και αποθήκευση σε μια μεταβλητή ' εισαγωγή '.
- Καταργήστε την επιλογή του πλαισίου ελέγχου ορίζοντας το ' τετραγωνισμένος 'περιουσία' ψευδής '.
Τέλος, ορίστε μια συνάρτηση για να καταργήσετε την επιλογή του πλαισίου ελέγχου από προεπιλογή στη φόρτωση σελίδας χρησιμοποιώντας το ' window.onload ' Εκδήλωση:
παράθυρο. σε φορτίο = λειτουργία ( ) {παράθυρο. addEventListener ( 'φορτώνω' , έλεγχος , ψευδής ) ;
}
Παραγωγή
Η έξοδος σημαίνει ότι το πλαίσιο ελέγχου είναι επιλεγμένο και αποεπιλεγμένο με επιτυχία ενώ κάνετε κλικ στα κουμπιά.
Παράδειγμα 2: Επιλέξτε/Αποεπιλέξτε πολλαπλά πλαίσια ελέγχου
Ας δούμε ένα παράδειγμα του τρόπου ελέγχου ή κατάργησης της επιλογής όλων των πλαισίων ελέγχου ταυτόχρονα.
Πρώτα, δημιουργήστε ένα αρχείο HTML και, στη συνέχεια, δημιουργήστε πολλά πλαίσια ελέγχου και ένα κουμπί με το αναγνωριστικό ' μεταβάλλω ' που θα αλλάξει το πλαίσιο ελέγχου για να επιλέξετε ή να αποεπιλέξετε:
< h3 > Κάντε κλικ στο κουμπί για να επιλέξετε ή να αποεπιλέξετε όλα τα πλαίσια ελέγχου h3 >< τύπος εισόδου = 'πλαίσιο ελέγχου' τάξη = 'πλαίσιο ελέγχου' > Επιλέξτε ή αποεπιλέξτε με < br >
< τύπος εισόδου = 'πλαίσιο ελέγχου' τάξη = 'πλαίσιο ελέγχου' > Επιλέξτε ή αποεπιλέξτε με < br >
< τύπος εισόδου = 'πλαίσιο ελέγχου' τάξη = 'πλαίσιο ελέγχου' > Επιλέξτε ή αποεπιλέξτε με < br >
< τύπος εισόδου = 'πλαίσιο ελέγχου' τάξη = 'πλαίσιο ελέγχου' > Επιλέξτε ή αποεπιλέξτε με < br >
< τύπος εισόδου = 'πλαίσιο ελέγχου' τάξη = 'πλαίσιο ελέγχου' > Επιλέξτε ή αποεπιλέξτε με < br >< br >
< τύπος εισόδου = 'κουμπί' ταυτότητα = 'μεταβάλλω' αξία = 'Κάντε κλικ για εναλλαγή των πλαισίων ελέγχου' >
Η αντίστοιχη έξοδος θα είναι:
Μετά από αυτό, σε ένα αρχείο JavaScript ή ετικέτα