Αυτό το άρθρο θα παρουσιάσει τις μεθόδους για τον έλεγχο και την αποεπιλογή όλων των πλαισίων ελέγχου χρησιμοποιώντας JavaScript.
Πώς να ελέγξετε και να αποεπιλέξετε όλα τα πλαίσια ελέγχου χρησιμοποιώντας JavaScript;
Για να επιλέξετε και να αποεπιλέξετε όλα τα πλαίσια ελέγχου στο JavaScript, μπορείτε να εφαρμόσετε:
- ' document.getElementsByName ' μέθοδος με πλαίσια ελέγχου
- ' document.getElementsByName ' μέθοδος με κουμπιά
Οι αναφερόμενες προσεγγίσεις θα συζητηθούν τώρα μία προς μία!
Μέθοδος 1: Επιλέξτε και καταργήστε την επιλογή όλων των πλαισίων ελέγχου σε JavaScript Χρησιμοποιώντας τη μέθοδο 'document.getElementsByName()' με 'Checkboxes'
Ο ' document.getElementsByName() Η μέθοδος επιστρέφει τα στοιχεία με το καθορισμένο όνομα στα ορίσματά της. Αυτή η μέθοδος θα εφαρμοστεί για την ανάκτηση της τιμής κάθε πλαισίου ελέγχου με τη βοήθεια του επιβεβλημένου ονόματος.
Ας δούμε το παρακάτω παράδειγμα για επίδειξη.
Παράδειγμα
Αρχικά, ο τύπος εισόδου θα καθοριστεί ως ' πλαίσιο ελέγχου ” και ένα συγκεκριμένο όνομα και τιμή θα εκχωρηθεί σε κάθε πλαίσιο ελέγχου:
< τύπος εισόδου = 'πλαίσιο ελέγχου' όνομα = 'μόλις' αξία = 'Πύθων' > Πύθων < br />< τύπος εισόδου = 'πλαίσιο ελέγχου' όνομα = 'μόλις' αξία = 'Ιάβα' > Ιάβα < br />
< τύπος εισόδου = 'πλαίσιο ελέγχου' όνομα = 'μόλις' αξία = 'JavaScript' > JavaScript < br />
Τώρα, συμπεριλάβετε ένα επιπλέον πλαίσιο ελέγχου με την τιμή ' Ελεγξε τα ολα ' και επισυνάψτε ένα ' στο κλικ() ' συμβάν με αυτό το πλαίσιο ελέγχου που θα λειτουργεί με τέτοιο τρόπο όταν κάνετε κλικ στο πλαίσιο ελέγχου, το ' έλεγχος Μη επιλεγμένο ()' η μέθοδος θα κληθεί με το αντικείμενο ' Αυτό ως επιχείρημα:
< τύπος εισόδου = 'πλαίσιο ελέγχου' στο κλικ = 'checkUncheck(this)' /> Ελεγξε τα ολα < br />
Μετά από αυτό, ορίστε μια συνάρτηση με το όνομα ' check Uncheck() ' στο αρχείο JavaScript, με μια μεταβλητή που ονομάζεται ' Πλαίσιο ελέγχου ” ως επιχείρημα. Τώρα, αποκτήστε πρόσβαση στις τιμές του πλαισίου ελέγχου χρησιμοποιώντας το ' document.getElementsByName() μέθοδος ' και τοποθετήστε την τιμή του ' όνομα ” χαρακτηριστικό ως επιχείρημά του.
Τέλος, εφαρμόστε ένα ' Για ' βρόχο για επανάληψη κατά μήκος όλων των τιμών του πλαισίου ελέγχου και χρήση του ' τετραγωνισμένος ιδιότητα για να τα επισημάνετε όλα ως επιλεγμένα:
έλεγχος λειτουργίας Καταργήστε την επιλογή ( Πλαίσιο ελέγχου ) {παίρνω = έγγραφο. getElementsByName ( 'μόλις' ) ;
Για ( ήμουν μέσα = 0 ; Εγώ < παίρνω. μήκος ; Εγώ ++ ) {
παίρνω [ Εγώ ] . τετραγωνισμένος = Πλαίσιο ελέγχου. τετραγωνισμένος ; }
}
Όπως μπορείτε να δείτε, όταν το « Ελεγξε τα ολα Το πλαίσιο ελέγχου είναι επισημασμένο, όλα τα άλλα πλαίσια ελέγχου επισημαίνονται επίσης ως επιλεγμένα:
Μέθοδος 2: Επιλέξτε και αποεπιλέξτε όλα τα πλαίσια ελέγχου σε JavaScript χρησιμοποιώντας τη μέθοδο 'document.getElementsByName()' με 'Buttons'
Ο ' document.getElementsByName() Η μέθοδος », όπως συζητήθηκε στην προηγούμενη μέθοδο, ανακτά τα στοιχεία με το καθορισμένο όνομα στα ορίσματά της. Μπορεί να χρησιμοποιηθεί για να επιλέξετε ή να αποεπιλέξετε όλα τα προστιθέμενα πλαίσια ελέγχου σε μια ιστοσελίδα.
Δείτε το παρακάτω παράδειγμα για επίδειξη.
Παράδειγμα
Τώρα, θα συμπεριλάβουμε δύο κουμπιά και για τα δύο ' Ελέγχει όλα ' και ' Ξετσεκαρε τα ολα ” λειτουργικότητες. Στη συνέχεια, επισυνάψτε ένα ' στο κλικ Συμβάν και με τα δύο κουμπιά που θα έχει πρόσβαση στις καθορισμένες λειτουργίες ξεχωριστά:
< τύπος εισόδου = 'κουμπί' στο κλικ = 'έλεγχος()' αξία = 'Ελέγχει όλα' />< τύπος εισόδου = 'κουμπί' στο κλικ = 'αποεπιλογή()' αξία = 'Καταργεί την επιλογή όλων' />
Στη συνέχεια, ορίστε μια συνάρτηση με το όνομα ' έλεγχος() ' και εφαρμόστε το ' document.getElementsByName ' μέθοδος με την καθορισμένη τιμή του ' όνομα ' Χαρακτηριστικό. Στη συνέχεια, επαναλάβετε το ' Για ' βρόχο κατά μήκος όλων των τιμών του πλαισίου ελέγχου που συζητήθηκαν στην προηγούμενη μέθοδο.
Επιπλέον, όταν κάνετε κλικ στο σχετικό κουμπί, το « τετραγωνισμένος Η ιδιότητα ' θα επισημάνει όλα τα πλαίσια ελέγχου και θα ορίσει την επιλεγμένη κατάσταση ως ' αληθής ”:
έλεγχος λειτουργίας ( ) {να είσαι κατσίκα = έγγραφο. getElementsByName ( 'έλεγχος' ) ;
Για ( ήμουν μέσα = 0 ; Εγώ < παίρνω. μήκος ; Εγώ ++ ) {
παίρνω [ Εγώ ] . τετραγωνισμένος = αληθής ; }
}
Στη συνέχεια, ορίστε μια συνάρτηση με το όνομα ' αποεπιλογή() ' και προσθέστε την αντίστροφη λειτουργία σε αυτήν για να επισημάνετε την ιδιότητα του πλαισίου ελέγχου ως ' ψευδής ”:
λειτουργία αποεπιλογή ( ) {να είσαι κατσίκα = έγγραφο. getElementsByName ( 'έλεγχος' ) ;
Για ( ήμουν μέσα = 0 ; Εγώ < παίρνω. μήκος ; Εγώ ++ ) {
παίρνω [ Εγώ ] . τετραγωνισμένος = ψευδής ; }
}
Μπορεί να δει στην έξοδο ότι τα προστιθέμενα κουμπιά λειτουργούν τέλεια:
Παρέχουμε τις πιο εύκολες μεθόδους για να ελέγξετε και να αποεπιλέξετε όλα τα πλαίσια ελέγχου χρησιμοποιώντας JavaScript.
συμπέρασμα
Για να επιλέξετε και να αποεπιλέξετε όλα τα πλαίσια ελέγχου χρησιμοποιώντας JavaScript, χρησιμοποιήστε το ' document.getElementsByName() 'μέθοδος με ' Πλαίσια ελέγχου ' για να προσθέσετε ένα πλαίσιο ελέγχου και να αποκτήσετε πρόσβαση στη συνάρτηση, η οποία θα έχει ως αποτέλεσμα να τσεκάρετε τα πλαίσια ελέγχου ή να εφαρμόσετε την ίδια μέθοδο με ' Κουμπιά ” για να συμπεριλάβετε δύο κουμπιά χωριστά για έλεγχο και αποεπιλογή όλων των καθορισμένων τιμών. Αυτή η εγγραφή εξήγησε τις μεθόδους για τον έλεγχο και την αποεπιλογή όλων των πλαισίων ελέγχου χρησιμοποιώντας JavaScript.