Recientemente, esta película debe diseñarse para proporcionar una función de casilla de verificación que se selecciona todo.
Oh, ¿no es esto algo muy simple? Una casilla de verificación general, n múltiples sub-checkboxes. Una vez que se selecciona la casilla de verificación general, se seleccionan todos los sub-checkboxes. Una vez que no se selecciona la casilla de verificación general, los sub-checkboxes no están seleccionados.
Después de recibir esta pequeña solicitud, estaba secretamente feliz. Qué función tan simple, ok, se hará en dos minutos ~~~
El tiempo pasó por minuto a minuto, y los caballos en la pradera corriendo en mi corazón aumentaron gradualmente de todo el tiempo a decenas de millones ~~~
¿Qué está pasando con esto?
alert ($ ("#checkbox_all"). attr ("checked"));
Siempre indefinido?
¿Nani? ? ?
¿Por qué está sucediendo esto? ? ¿Eres estúpido en el navegador? Luego, cambie decisivamente los navegadores para probar, de Chrome a IE, de IE a Firefox. Este es el resultado -_- ||
¿Podría ser que JQuery ha realizado mejoras? ? ? ?
Después de verificar con el telescopio Hubble y el microscopio electrónico láser HD, finalmente encontramos la pista. . . .
Resulta que esto se ha modificado en jQuery versión 1.6:
[El atributo verificado se ha inicializado cuando la página se inicializa y no cambiará con el cambio de estado.
Es decir, si se selecciona la casilla de verificación después de cargar la página, entonces el devuelto siempre se verificará (no la seleccioné desde el principio)
Si no se selecciona al principio, ¡el devuelto siempre estará indefinido! 】
Dado que JQuery ha realizado cambios en esto, debe haber una mejor solución correspondiente:
.prop () es el arma para resolver este problema!
El uso específico es el siguiente:
alert ($ ("#checkbox_all"). prop ("checked"));
Se volverá verdadero o falso en este momento ~~
Entonces, el código de esta transmisión se cambió a lo siguiente:
#check_all es la casilla de verificación total seleccionada todo, y #check_children es la casilla de verificación infantil
La copia del código es la siguiente:
$ ("#check_all"). Change (function () {
$ ('. check_children'). Prop ("Checked", this.ecked);
});
o:
La copia del código es la siguiente:
$ ("#check_all"). Change (function () {
var is_checked = $ (this) .prop ("comprobado");
$ ('. check_children'). Prop ("Checked", IS_Checked);
});
Sin embargo, todavía me gusta mucho usar el primer método. Cuanto menos código, mejor ~~ escriba menos, ¡haz más!
Es muy conveniente resolver el problema de elegir todo ~~~