¿Cómo puedo anular .serialize de jquery para incluir casillas de verificación sin marcar?

Después de de nuestra prolongada selección de datos solucionamos este contratiempo que tienen muchos los lectores. Te compartimos la solución y esperamos que sea de mucha ayuda.

Solución:

solo adjunta los datos. En mi rutina de guardar, es suficiente enviar sin marcar como vacío string y marcado como “encendido”:

var formData = $('form').serialize();

// include unchecked checkboxes. use filter to only include unchecked boxes.
$.each($('form input[type=checkbox]')
    .filter(function(idx)
        return $(this).prop('checked') === false
    ),
    function(idx, el)
        // attach matched element names to the formData with a chosen value.
        var emptyVal = "";
        formData += '&' + $(el).attr('name') + '=' + emptyVal;
    
);

Esto anulará el método jquery.serialize() para enviar valores marcados/no marcados, en lugar de solo valores marcados. Usa true/falsepero puede cambiar “this.checked” a “this.checked ? ‘on’ : 0” si lo prefiere.

var originalSerializeArray = $.fn.serializeArray;
$.fn.extend(
    serializeArray: function () 
        var brokenSerialization = originalSerializeArray.apply(this);
        var checkboxValues = $(this).find('input[type=checkbox]').map(function () 
            return  'name': this.name, 'value': this.checked ;
        ).get();
        var checkboxKeys = $.map(checkboxValues, function (element)  return element.name; );
        var withoutCheckboxes = $.grep(brokenSerialization, function (element) 
            return $.inArray(element.name, checkboxKeys) == -1;
        );

        return $.merge(withoutCheckboxes, checkboxValues);
    
);

Creo que a la solución de Robin Maben le falta un paso, que es configurar las casillas para que tengan la propiedad de ‘marcado’. Las notas de la guía del usuario de jQuery sobre serialise () indican que solo se serializan las casillas de verificación marcadas, por lo que debemos agregar un poco:

$('form').find(':checkbox:not(:checked)').attr('value', '0').prop('checked', true);

El único inconveniente de este método es un breve destello de su formulario que muestra todas las casillas marcadas, se ve un poco extraño.

valoraciones y reseñas

Eres capaz de añadir valor a nuestra información cooperando tu experiencia en las explicaciones.

---

---

Utiliza Nuestro Buscador