Wie kann ich jquery's serialize überschreiben, um nicht markierte Kontrollkästchen einzuschließen

Question

Ich habe gelesen, ziemlich viele verschiedene Methoden der HTML-Checkboxen auf dem Server veröffentlicht werden, aber ich bin wirklich auf der Suche nach tun, ohne etwas außer $ .serialize zu ändern. Ich möchte im Idealfall, dass die aktivierten Kästchen als aktiviert und nicht markiert als 0, leer oder null markiert werden.

Ich bin ein wenig verwirrt von jquery's inner-workings, aber ich habe das bis jetzt, aber es setzt unchecked checkboxes auf 'on' ... Kann mir jemand sagen, wie man diese Modifikation unten weiterführt?

$.fn.extend({ 
    serializeArray: function() { 
     return this.map(function(){ 
      return this.elements ? jQuery.makeArray(this.elements) : this; 
     }) 
     .filter(function(){ 
      return this.name && !this.disabled && 
       (this.checked || !this.checked || rselectTextarea.test(this.nodeName) || rinput.test(this.type)); 
     }) 
     .map(function(i, elem){ 
      var val = jQuery(this).val(); 

      return val == null ? 
       null : 
       jQuery.isArray(val) ? 
        jQuery.map(val, function(val, i){ 
         return { name: elem.name, value: val.replace(/\r?\n/g, "\r\n") }; 
        }) : 
        { name: elem.name, value: val.replace(/\r?\n/g, "\r\n") }; 
     }).get(); 
    } 
}); 

Answer 1

Es ist eine kleine Änderung:

.map(function(i, elem){ 
     var val = jQuery(this).val(); 
     if ((jQuery(this).checked != undefined) && (!jQuery(this).checked)) { 
      val = "false"; 
     } 

habe ich nicht getestet, aber es scheint die logischste Ansatz. Viel Glück

Answer 2

Bevor Sie serialize() rufen, müssen Sie den Wert auf false explizit festgelegt, ob eine Checkbox deaktiviert ist

$(form).find(':checkbox:not(:checked)').attr('value', false); 

ich es here getestet haben.

Answer 3

Ich mag @Robin Maben Ansatz (Vorverarbeitung der Kontrollkästchen vor dem Aufruf der nativen .serialize()), aber kann es nicht ohne signifikante Änderung zu arbeiten.

kam ich mit diesem Plugin, den ich "mySerialize" (wahrscheinlich braucht einen besseren Namen) genannt haben:

$.fn.mySerialize = function(options) { 
    var settings = { 
     on: 'on', 
     off: 'off' 
    }; 
    if (options) { 
     settings = $.extend(settings, options); 
    } 
    var $container = $(this).eq(0), 
     $checkboxes = $container.find("input[type='checkbox']").each(function() { 
      $(this).attr('value', this.checked ? settings.on : settings.off).attr('checked', true); 
     }); 
    var s = ($container.serialize()); 
    $checkboxes.each(function() { 
     var $this = $(this); 
     $this.attr('checked', $this.val() == settings.on ? true : false); 
    }); 
    return s; 
}; 

Getestet in Opera 11.62 und IE9.

Wie Sie in dieser DEMO sehen können, können Sie angeben, wie die ON- und OFF-Status der Kontrollkästchen serialisiert werden, wenn ein Optionsobjekt als Parameter an mySerialize() übergeben wird. Standardmäßig ist der ON-Status serialisiert als 'name = ein' und AUS als 'name = aus'. Alle anderen Formularelemente werden gemäß nativem jQuery serialisiert.

Answer 4

Dadurch wird die Methode jquery.serialize() überschrieben, um sowohl überprüfte als auch nicht überprüfte Werte zu senden und nicht nur überprüfte Werte. Es verwendet true/false, aber Sie können "this.checked" in "this.checked? 'On': 0" ändern, wenn Sie bevorzugen.

Answer 5

Ich denke, Robin Maben's Lösung fehlt ein Schritt, der die Kästchen auf eine Eigenschaft von 'checked' setzen soll. jQuery user guide notes on serialise() Zustand, der nur überprüft Kontrollkästchen werden serialisiert, also müssen wir ein wenig hinzuzufügen:

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

Das einzig Negative an dieser Methode ist, ein kurzes Aufblitzen des Formulars zeigt alle kreuzte Kästchen - sieht ein bisschen komisch.

Answer 6

nur die Daten anhängen. In meiner speichern Routine es reicht nicht markiert als leere Zeichenfolge vorzulegen und kontrolliert, als „on“:

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; 
    } 
); 

Answer 7

Ich habe die folgende, die nicht aktiviert Kontrollkästchen zu finden, sie zu überprüfen, bevor serializeArray anrufen, dann sie so die Form unchecking würde sein in dem gleichen Zustand wie der Benutzer es links:

var unchecked = chartCfgForm.find(':checkbox:not(:checked)'); 
unchecked.each(function() {$(this).prop('checked', true)}); 
var formValues = chartCfgForm.serializeArray(); 
unchecked.each(function() {$(this).prop('checked', false)}); 

Answer 8

Rote-Bete-Rote-Bete-Antwort nicht 1,9 und später in jQuery für mich arbeiten. Ich verwendete .val() und .prop(), und wurde die .eq(0) Anforderung für den Container, die Serialisierung auf ein Formular im Selektor eingeschränkt. Ich hatte einen seltenen Fall, in dem ich mehrere Formulare gleichzeitig serialisieren musste. Hier ist meine modifizierte Lösung:

$.fn.mySerialize = function(options) { 
    // default values to send when checkbox is on or off 
    var settings = { 
     on: 'on', 
     off: 'off' 
    }; 

    // override settings if given 
    if (options) { 
     settings = $.extend(settings, options); 
    } 

    // set all checkboxes to checked with the on/off setting value 
    // so they get picked up by serialize() 
    var $container = $(this), 
     $checkboxes = $container.find("input[type='checkbox']").each(function() { 
      $(this).val(this.checked ? settings.on : settings.off).prop('checked', true); 
     }); 

    var serialized = ($container.serialize()); 

    $checkboxes.each(function() { 
     var $this = $(this); 
     $this.prop('checked', $this.val() == settings.on); 
    }); 

    return serialized; 
}; 

Sie die entsprechende fiddle here sehen können.