El problema es que a mi no me gusta lo que hace el navegador con los “checkboxes”.

Como cualquier otro input, los checkboxes tienen un valor asociado (por defecto “on”, aunque no estoy seguro de si esto varía según el navegador). Lo que uno esperaría de value, es que sea “on” si está checked y “off” si está unchecked. Pero no señores, no se confundan, siempre es “on”, igual que si le dices que value=”pepito”, value siempre será “pepito” independientemente de si el checkbox está checkeado o no.

Entonces (se preguntará el lector avispado que aún no haya tenido el placer de programar en HTML), ¿como sabe el servidor si el checkbox está checked o unchecked? Elemental mi querido Watson. El navegador sólo envia esa información si está checked y no la envia si está unchecked. ¿Que putada, no? Porque hay veces que parece que esto rompe algunos flujos típicos con otros datos.

No es que este comportamiento de los navegadores sea muy problematico, pero a veces a uno le interesa que funcione de otra manera.

Sea como fuere, aquí pongo una extensión para jQuery, que básicamente lo que hace es lo mismo que “serialize” pero pone siempre los checkboxes, de tal forma que pone “nombre=1” cuando el checkbox está activado, y “nombre=0” cuando no está activado.

jQuery.fn.jserialize = function () {
  var serialized = this.serialize();
 
  $(this).find(':checkbox').each (function() {
    var tofind    = $(this).attr('name') + "=" + $(this).val();
    var toreplace = $(this).attr('name') + "=" + (this.checked ? '1' : '0');
 
    if (this.checked)   { serialized = serialized.replace (tofind, toreplace); }
    else                { serialized += "&" + toreplace; }
  });
 
  return serialized;
}

Enlaces de interés:

• Resetear un formulario con jQuery
• Pregunta de Badtant sobre porque serialize no envia los unchecked checkboxes
• Página oficial de jQuery
• Método jQuery.serialize
• Método jQuery.serializeArray

Con jquery esto es bastante fácil:

$('#Formulario').each (function(){
  this.reset();
});

El tema está en que el código de arriba itera sobre cada elemento que está dentro de form, y llama al método “reset” del DOM de javascript (ojo que no se hace un $(this).reset()). La función “reset” en jquery no existe.

Sería más sencillo si se pudiera hacer $(“#Formulario”).reset() y listo, ¿verdad?. Bueno, por suerte crear esa función únicamente requiere que perdamos 1 minuto programando:

jQuery.fn.reset = function () {
  $(this).each (function() { this.reset(); });
}

Ahora, una vez definido el código de arriba, ya podemos hacer un reset llamando a “reset”:

$("#Formulario").reset();

Tal vez usar “reset” es demasiado genérico para ser aplicado a cualquier objeto, aunque creo que tiene bastante sentido usar un nombre tan sencillo, pero quien quiera que lo renombre a “resetForm”.

Enlaces de interés:

• Getting started with jquery: interesante echarle un ojo
• Clearing form data: como borrar los datos en un formulario