¿Por qué el atributo marcado no está visible en el DOM?
En onchange input.val() siempre está on , pero ¿el atributo checked está cambiando?
input.change(_=> { console.log('val:', input.val(), ', checked:', input.prop('checked')); });consola
val: on , checked: true val: on , checked: false val: on , checked: true val: on , checked: false Si la casilla de verificación de entrada es de readonly , todavía puedo cambiar el valor y al hacer clic en la casilla de verificación da el mismo resultado en la consola
El value de un elemento de radio o casilla de verificación no cambia (a menos que lo haga mediante programación, pero aquí estamos hablando de una interacción simple del usuario con el formulario).
Cuando marca la opción/casilla de verificación, solo cambia la propiedad checked . Es esta propiedad la que debe determinar qué acción tomará cuando su usuario interactúe con el formulario.
¿Por qué el atributo marcado no está visible en el DOM?
Esto se debe a que es la propiedad checked del objeto Elemento la que se actualiza, no el atributo checked . Si desea actualizar el DOM, cambie prop() a attr() en su código JS, pero tenga en cuenta que esto es más lento y no tiene ningún propósito útil en este caso.
Aquí hay una muy buena respuesta que detalla la diferencia entre propiedades y atributos en JavaScript, lo que puede ayudar a aclarar cualquier confusión.