Pregunta ¿Configurando "marcado" una casilla con jQuery?


Me gustaría hacer algo como esto para marcar un checkbox utilizando jQuery:

$(".myCheckBox").checked(true);

o

$(".myCheckBox").selected(true);

¿Existe tal cosa?


3595
2018-01-08 22:20


origen


Respuestas:


jQuery 1.6+

Usa el nuevo .prop() método:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.xy por debajo

los .prop() método no está disponible, por lo que debe usar .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Tenga en cuenta que esto es el enfoque utilizado por las pruebas unitarias de jQuery antes de la versión 1.6 y es preferible a usar

$('.myCheckbox').removeAttr('checked');

ya que este último, si la casilla se verificó inicialmente, cambiará el comportamiento de una llamada a .reset() en cualquier forma que lo contenga, un cambio de comportamiento sutil pero probablemente no bienvenido.

Para más contexto, una discusión incompleta de los cambios en el manejo del checked atributo / propiedad en la transición de 1.5.x a 1.6 se puede encontrar en notas de la versión 1.6 y el Atributos vs. Propiedades sección de la .prop() documentación.

Cualquier versión de jQuery

Si trabajas con un solo elemento, siempre puedes modificar el HTMLInputElementes .checked propiedad:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

El beneficio de usar el .prop() y .attr() métodos en lugar de esto es que operarán en todos los elementos coincidentes.


5402
2018-01-08 22:25



Utilizar:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

Y si desea verificar si una casilla de verificación está marcada o no:

$('.myCheckbox').is(':checked');

622
2018-01-08 22:25



Esta es la forma correcta de verificar y desmarcar casillas de verificación con jQuery, ya que es estándar multiplataforma, y será Permitir reenvíos de 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 casilla de verificación ejecutará este código sin problemas. Esta debería ser todos los principales navegadores, pero no puedo probar antes de 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 de los atributos "marcados".

Aquí hay un ejemplo del atributo checkbox que no hace el trabajo después de que alguien tiene clickeado la casilla de verificación (esto sucede en Chrome).

Violín

La solución:

Al usar la propiedad "marcada" de JavaScript en DOM elementos, podemos resolver el problema directamente, en lugar de tratar de manipular el DOM para hacer lo que querer para hacer.

Violín

Este complemento alterará la propiedad comprobada de cualquier elemento seleccionado por jQuery, y verificará y desmarca con éxito las casillas de verificación en cualquier circunstancia. Por lo tanto, aunque parezca una solución excesiva, mejorará la experiencia del usuario de su sitio y ayudará a evitar 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 usar un complemento, puede usar 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;
});

284
2018-05-06 19:31



Tu puedes hacer

$('.myCheckbox').attr('checked',true) //Standards compliant

o

$("form #mycheckbox").attr('checked', true)

Si tienes un código personalizado en el evento onclick para la casilla de verificación que deseas disparar, usa este en su lugar:

$("#mycheckbox").click();

Puede desmarcar quitando el atributo por completo:

$('.myCheckbox').removeAttr('checked')

Puede marcar todas las casillas de verificación de esta manera:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

129
2018-01-08 22:24



También puede extender 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 hacer:

$(":checkbox").check();
$(":checkbox").uncheck();

O tal vez quiera darles nombres más únicos como mycheck () y myuncheck () en caso de que use alguna otra biblioteca que use esos nombres.


67
2017-08-20 18:19



$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

El último disparará el evento de clic para la casilla de verificación, los otros no. Por lo tanto, si tiene un código personalizado en el evento onclick para la casilla de verificación que desea activar, use el último.


58
2018-01-08 22:36



Para marcar una casilla de verificación, debe usar

 $('.myCheckbox').attr('checked',true);

o

 $('.myCheckbox').attr('checked','checked');

y para desmarcar una casilla de verificación, siempre debe establecerlo en falso:

 $('.myCheckbox').attr('checked',false);

Si lo haces

  $('.myCheckbox').removeAttr('checked')

elimina el atributo todos juntos y, por lo tanto, no podrá restablecer el formulario.

MALA DEMO jQuery 1.6. Creo que esto está roto. Para 1.6 voy a hacer una nueva publicación sobre eso.

NUEVA DEMO DE TRABAJO jQuery 1.5.2 funciona en Chrome

Ambas demostraciones usan

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

56
2018-03-23 15:22



Asumiendo que la pregunta es ...

¿Cómo controlo un conjunto de casillas de verificación? ¿POR VALOR?

Recuerde que en un conjunto típico de casillas de verificación, todas las etiquetas de entrada tienen el mismo nombre, se diferencian por el atributo value: no hay ID para cada entrada del conjunto.

La respuesta de Xian se puede extender con un selector más específico, usando la siguiente línea de código:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

42
2018-06-24 11:33