Todo sobre jQuery y los checkbox

Aquí una serie de ejemplos para aprender a utilizar jQuery y los checkbox de formulario.

Saber si un checkbox está checkeado o no

Checkbox 1 Checkbox 2

Estos checkbox abmos tienen la clase checkbox1, veamos como ejecutar un código que nos diga en que estado está cada uno (para ejecutar algo con cada uno utilizaremos el método each de jQuery.)

  $('.ejemploCheckbox1').each(function(){
     var checkbox = $(this);
     log('El checkbox ' + checkbox.attr('name') + ' está checkeado? ' + checkbox.is(':checked')  );
  });

Como ven la cuestión se reduce a utilizar el método is con el prédicado checked.

Setear el valor de un checkbox:

Checkbox 1 Checkbox 2

Los anteriores checkbox tienen la clase ejemploCheckbox2, setear el valor de cada uno de ellos con jQuery es muy fácil utilizando el método attr:

  $('[name="checkbox1"].ejemploCheckbox2').attr('checked',false);
  $('[name="checkbox2"].ejemploCheckbox2').attr('checked',true);

En el código anterior utilizamos un selector por el atributo name, y luego al elemento matcheado le seteamos la propiedad checked, utilizando un valor true o false.

Ejecutar código cuando se checkea un checkbox:

Como último ejemplo veamos como realizar una acción cuando se checkea o se descheckea un checkbox. Para eso utilizaremos el evento click del checkbox, y el predicado :checked como vimos en el primer ejemplo.

Checkbox 1

  $('[name="checkbox1"].ejemploCheckbox3').click(function() {
    if($(this).is(':checked')) {
      log('Se hizo check en el checkbox.');
    } else {
      log('Se destildo el checkbox');
    }
  });

Si hacen click en ejecutar en el código anterior. Pueden probar lo que sucede cada vez que se tilda o se destilda el checkbox del ejemplo.