<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
Μέσα από το onClickHandler
και/ή το onChangeHandler
, πώς μπορώ να προσδιορίσω ποια είναι η νέα κατάσταση του πλαισίου ελέγχου;
Η σύντομη απάντηση:
Χρησιμοποιήστε το συμβάν click
, το οποίο δεν θα ενεργοποιηθεί μέχρι να ενημερωθεί η τιμή και θα ενεργοποιηθεί όταν το θέλετε:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
Η μεγαλύτερη απάντηση:
Ο χειριστής του συμβάντος change
δεν καλείται μέχρι να ενημερωθεί η κατάσταση checked
(ζωντανό παράδειγμα | πηγή), αλλά επειδή (όπως επισημαίνει ο Tim Büthe στα σχόλια) ο IE δεν πυροδοτεί το συμβάν change
μέχρι το checkbox να χάσει την εστίαση, δεν λαμβάνετε την ειδοποίηση προληπτικά. Ακόμη χειρότερα, με τον IE, αν κάνετε κλικ σε μια ετικέτα για το πλαίσιο ελέγχου (αντί για το ίδιο το πλαίσιο ελέγχου) για να το ενημερώσετε, μπορεί να έχετε την εντύπωση ότι λαμβάνετε την παλιά τιμή (δοκιμάστε το με τον IE εδώ κάνοντας κλικ στην ετικέτα: ζωντανό παράδειγμα | πηγή). Αυτό οφείλεται στο γεγονός ότι αν το πλαίσιο ελέγχου έχει εστίαση, το κλικ στην ετικέτα αφαιρεί την εστίαση από αυτό, πυροδοτώντας το συμβάν change
με την παλιά τιμή, και στη συνέχεια συμβαίνει το click
που θέτει τη νέα τιμή και επαναφέρει την εστίαση στο πλαίσιο ελέγχου. Πολύ συγκεχυμένη κατάσταση.
Αλλά μπορείτε να αποφύγετε όλα αυτά τα δυσάρεστα αν χρησιμοποιήσετε το click
αντί αυτού.
Χρησιμοποίησα χειριστές του DOM0 (χαρακτηριστικά onxyz
) επειδή αυτό ρωτήσατε, αλλά για την ιστορία, θα συνιστούσα γενικά να συνδέσετε χειριστές στον κώδικα (DOM2's addEventListener
, ή attachEvent
σε παλαιότερες εκδόσεις του IE) αντί να χρησιμοποιείτε χαρακτηριστικά onxyz
. Αυτό σας επιτρέπει να συνδέσετε πολλαπλούς χειριστές στο ίδιο στοιχείο και σας επιτρέπει να αποφύγετε να κάνετε όλους τους χειριστές σας παγκόσμιες συναρτήσεις.
Μια προηγούμενη έκδοση αυτής της απάντησης χρησιμοποιούσε αυτόν τον κώδικα για το handleClick
:
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
Ο στόχος φαινόταν να επιτρέπει την ολοκλήρωση του κλικ πριν από την εξέταση της τιμής. Απ' όσο γνωρίζω, δεν υπάρχει κανένας λόγος να το κάνετε αυτό και δεν έχω ιδέα γιατί το έκανα. Η τιμή αλλάζει πριν κληθεί ο χειριστής του click
. Στην πραγματικότητα, το spec είναι αρκετά σαφές σχετικά με αυτό. Η έκδοση χωρίς το setTimeout
λειτουργεί τέλεια σε κάθε πρόγραμμα περιήγησης που έχω δοκιμάσει (ακόμα και στον IE6). Το μόνο που μπορώ να υποθέσω είναι ότι σκεφτόμουν κάποια άλλη πλατφόρμα όπου η αλλαγή δεν γίνεται παρά μόνο μετά το συμβάν. Σε κάθε περίπτωση, δεν υπάρχει λόγος να το κάνετε αυτό με τα πλαίσια ελέγχου HTML.
Για το React.js, μπορείτε να το κάνετε αυτό με πιο ευανάγνωστο κώδικα. Ελπίζω να βοηθάει.
handleCheckboxChange(e) {
console.log('value of checkbox : ', e.target.checked);
}
render() {
return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}