Configuración de "marcado" para una casilla de verificación con jQuery
Me gustaría hacer algo como esto para marcar el checkboxuso de jQuery :
$(".myCheckBox").checked(true);
o
$(".myCheckBox").selected(true);
¿Existe tal cosa?
jQuery moderno
Usar .prop():
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
API DOM
Si está trabajando con un solo elemento, siempre puede acceder al elemento subyacente HTMLInputElementy modificar su .checkedpropiedad:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
El beneficio de utilizar los métodos .prop()y .attr()en lugar de esto es que operarán en todos los elementos coincidentes.
jQuery 1.5.x y anteriores
El .prop()método no está disponible, por lo que es necesario utilizarlo .attr().
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
Tenga en cuenta que este es el enfoque utilizado por las pruebas unitarias de jQuery antes de la versión 1.6 y es preferible usarlo $('.myCheckbox').removeAttr('checked');ya que este último, si la casilla estaba marcada inicialmente, cambiará el comportamiento de una llamada en .reset()cualquier formulario que la contenga: una opción sutil pero probablemente cambio de comportamiento no deseado.
checkedPara obtener más contexto, se puede encontrar una discusión incompleta sobre los cambios en el manejo del atributo/propiedad en la transición de 1.5.x a 1.6 en las notas de la versión 1.6 y en la sección Atributos versus Propiedades de la .prop()documentación .
Usar:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
Y si quieres comprobar si una casilla de verificación está marcada o no:
$('.myCheckbox').is(':checked');
Esta es la forma correcta de marcar y desmarcar casillas de verificación con jQuery, ya que es un estándar multiplataforma y permitirá volver a publicar formularios.
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
Al hacer esto, está utilizando estándares de JavaScript para marcar y desmarcar casillas de verificación, por lo que cualquier navegador que implemente correctamente la propiedad "marcada" del elemento de casilla de verificación ejecutará este código sin problemas. Estos deberían ser todos los navegadores principales, pero no puedo realizar pruebas anteriores a Internet Explorer 9.
El problema (jQuery 1.6):
Una vez que un usuario hace clic en una casilla de verificación, esa casilla deja de responder a los cambios del atributo "marcado".
A continuación se muestra un ejemplo de cómo el atributo de casilla de verificación no funciona después de que alguien hizo clic en la casilla de verificación (esto sucede en Chrome).
Violín
La solución:
Al utilizar la propiedad "marcada" de JavaScript en los elementos DOM , podemos resolver el problema directamente, en lugar de intentar manipular el DOM para que haga lo que queremos que haga.
Violín
Este complemento alterará la propiedad marcada de cualquier elemento seleccionado por jQuery y marcará y desmarcará correctamente las casillas de verificación en todas las circunstancias. Entonces, si bien esto puede parecer una solución abrumadora, mejorará la experiencia del usuario de su sitio y ayudará a prevenir la frustración del usuario.
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
Alternativamente, si no desea utilizar un complemento, puede utilizar los siguientes fragmentos de código:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});
Tu puedes hacer
$('.myCheckbox').attr('checked',true) //Standards compliant
o
$("form #mycheckbox").attr('checked', true)
Si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use este en su lugar:
$("#mycheckbox").click();
Puede desmarcarlo eliminando el atributo por completo:
$('.myCheckbox').removeAttr('checked')
Puede marcar todas las casillas de verificación de esta manera:
$(".myCheckbox").each(function(){
$("#mycheckbox").click()
});
También puedes ampliar el objeto $.fn con nuevos métodos:
(function($) {
$.fn.extend({
check : function() {
return this.filter(":radio, :checkbox").attr("checked", true);
},
uncheck : function() {
return this.filter(":radio, :checkbox").removeAttr("checked");
}
});
}(jQuery));
Entonces puedes simplemente hacer:
$(":checkbox").check();
$(":checkbox").uncheck();
O quizás quieras darles nombres más únicos como mycheck() y myuncheck() en caso de que uses alguna otra biblioteca que use esos nombres.
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();
El último activará el evento de clic para la casilla de verificación, los demás no. Entonces, si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use el último.
