Ich verwende jQuery.serialize, um alle Datenfelder in einem Formular abzurufen.

Mein Problem ist, dass es keine Kontrollkästchen abruft, die nicht aktiviert sind.

Das beinhaltet:

<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" checked="checked" />

aber nicht dies

<input type="checkbox" id="event_allDay" name="event_allDay" class="checkbox" />

Wie kann ich “Werte” von Kontrollkästchen erhalten, die nicht aktiviert sind?

Um auf der genialen Antwort von Azatoth aufzubauen, habe ich sie für mein Szenario leicht erweitert:

    /* Get input values from form */
    values = jQuery("#myform").serializeArray();

    /* Because serializeArray() ignores unset checkboxes and radio buttons: */
    values = values.concat(
            jQuery('#myform input[type=checkbox]:not(:checked)').map(
                    function() {
                        return {"name": this.name, "value": false}
                    }).get()
    );

jQuery serialize ahmt genau nach, wie ein Standardformular vom Browser serialisiert würde, bevor es an die Abfragezeichenfolge oder den POST-Text in der Anforderung angehängt wird. Nicht aktivierte Kontrollkästchen werden vom Browser nicht eingefügt, was wirklich sinnvoll ist, da sie einen booleschen Zustand haben – sie werden entweder vom Benutzer ausgewählt (eingeschlossen) oder nicht vom Benutzer ausgewählt (nicht eingeschlossen).

Wenn Sie es in den serialisierten Dateien benötigen, sollten Sie sich fragen: “Warum? Warum nicht einfach in den Daten nachsehen, ob es vorhanden ist?”.

Denken Sie daran, dass, wenn sich die Art und Weise, wie JavaScript Formulardaten serialisiert, anders verhält als der Browser, Sie jede Möglichkeit einer ordnungsgemäßen Verschlechterung Ihres Formulars ausschließen. Wenn Sie es trotzdem unbedingt tun müssen, verwenden Sie einfach a <select> Feld mit Ja/Nein als Optionen. Wenigstens werden dann Benutzer mit deaktiviertem JS nicht von Ihrer Site abgeschreckt und Sie verstoßen nicht gegen das in der HTML-Spezifikation definierte Verhalten.

<select id="event_allDay" name="event_allDay">
   <option value="0" selected>No</option>
   <option value="1">Yes</option>
</select>

Ich habe dies in der Vergangenheit auf einigen Websites gesehen und dachte mir immer, “Warum verwenden sie nicht einfach ein Kontrollkästchen”?

Sie müssen dies nicht tun, da serialize als Abfragezeichenfolge verwendet werden soll, und in diesem Zusammenhang bedeutet nicht aktiviert, dass es überhaupt nicht in der Abfragezeichenfolge enthalten ist.

Wenn Sie wirklich die Werte von nicht aktivierten Kontrollkästchen erhalten möchten, verwenden Sie: (natürlich ungetestet)

var arr_unchecked_values = $('input[type=checkbox]:not(:checked)').map(function(){return this.value}).get();

Wenn Sie Ihrer Abfragezeichenfolge deserialisierte Kontrollkästchen hinzufügen möchten, fügen Sie Folgendes zu Ihrer jquery-Submit-Funktion hinzu:

var moreinfo = '';

$('input[type=checkbox]').each(function() {     
    if (!this.checked) {
        moreinfo += '&'+this.name+'=0';
    }
});

jQuery serialize ruft das Wertattribut von Eingaben ab.

Wie bekomme ich nun das Kontrollkästchen und das Optionsfeld zum Laufen? Wenn Sie das Click-Ereignis des Kontrollkästchens oder Radio-Buttons auf 0 oder 1 setzen, können Sie die Änderungen sehen.

$( "#myform input[type="checkbox"]" ).on( "click", function(){
     if ($(this).prop('checked')){
          $(this).attr('value', 1);
     } else {
          $(this).attr('value', 0);
     }
 }); 

 values = $("#myform").serializeArray();

und auch wann immer Sie das Kontrollkästchen mit aktiviertem Status setzen möchten, z. B. php

<input type="checkbox" value="<?php echo $product['check']; ?>" checked="<?php echo $product['check']; ?>" />

Hier ist eine weitere Lösung, die die Methode „serializeArray“ erweitert (unter Beibehaltung des ursprünglichen Verhaltens).

//Store the reference to the original method:

var _serializeArray = $ji.fn.serializeArray;

//Now extend it with newer "unchecked checkbox" functionality:
$ji.fn.extend({
    serializeArray: function () {
        //Important: Get the results as you normally would...
        var results = _serializeArray.call(this);

        //Now, find all the checkboxes and append their "checked" state to the results.
        this.find('input[type=checkbox]').each(function (id, item) {
            var $item = $ji(item);
            var item_value = $item.is(":checked") ? 1 : 0;
            var item_name = $item.attr('name');
            var result_index = null;
            results.each(function (data, index) {
                if (data.name == item_name) {
                    result_index = index;
                }
            });

            if (result_index != null) {
                // FOUND replace previous value
                results[result_index].value = item_value;
            }
            else {
                // NO value has been found add new one
                results.push({name: item_name, value: item_value});
            }
        });
        return results;
    }
});

Dadurch werden tatsächlich “wahre” oder “falsche” boolesche Ergebnisse angehängt, aber wenn Sie es vorziehen, können Sie “1” bzw. “0” verwenden, indem Sie den Wert auf ändern value: $item.is(":checked") ? 1 : 0.

Verwendung

Rufen Sie wie gewohnt die Methode in Ihrem Formular auf: $form.serialize() oder $form.serializeArray(). Was passiert, ist das serialize nutzt serializeArray wie auch immer, so dass Sie mit der von Ihnen aufgerufenen Methode die richtigen Ergebnisse (wenn auch in unterschiedlichem Format) erhalten.

Du kannst anrufen handleInputs() Fügen Sie Ihre Submit-Funktion vor Ajax hinzu

function handleInputs(){
    $('input[type=checkbox]').each(function() {     
        if (!this.checked) {
            $(this).attr("value","0");
        }else{
            $(this).attr("value","1");
        }
    });
}

Es funktioniert perfekt