jQuery sérialiser n'enregistre pas les cases à cocher

jQuery serialize imite de près comment un formulaire standard serait sérialisé par le navigateur avant d'être ajouté à la chaîne de requête ou de corps POST dans la demande. Décoché les cases ne sont pas compris par le navigateur, qui fait sens vraiment parce qu'ils ont une valeur booléenne de l'état -- ils sont sélectionnés par l'utilisateur (inclus) ou non sélectionné par l'utilisateur (non-inclus).

Si vous avez besoin d'être dans le sérialisé, vous devez vous demander "pourquoi? pourquoi ne pas vérifier son existence dans les données?".

Garder à l'esprit que si la façon de JavaScript sérialise les données de formulaire se comporte différemment de la façon dont le navigateur ne puis vous êtes en éliminant toute possibilité de dégradation gracieuse pour votre formulaire. Si vous devez absolument le faire, il suffit d'utiliser un <select> boîte avec Oui/Non comme des options. Au moins, puis, les utilisateurs avec JS désactivé ne sont pas éloignés de votre site et vous n'allez pas contre le comportement défini dans la spécification HTML.

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

Que j'ai vu cet employés sur certains sites, dans le passé, et j'ai toujours pensé à moi-même, "pourquoi ne pas simplement utiliser une case à cocher"?

Vous n'avez pas, comme sérialiser est destiné à être utilisé comme une chaîne de requête, et dans ce contexte, pas cochée signifie qu'il n'est pas dans la chaîne de requête à tous.

Si vous voulez vraiment obtenir les valeurs de décoché les cases à cocher, utilisation: (non testé bien sûr)

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

jQuery sérialiser obtient la valeur de l'attribut d'intrants.

Maintenant comment faire pour obtenir une case à cocher ou un bouton radio pour travailler? Si vous définissez l'événement click de la case à cocher ou un bouton-radio 0 ou 1, vous serez en mesure de voir les changements.

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

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

et aussi quand vous le souhaitez définir la case avec le statut vérifié par ex. php

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

Une technique que j'ai utilisé dans mes propres systèmes, et qui, je crois, est employée par des jambes de force, est à inclure...

<input type="hidden" name="_fieldname" value="fieldvalue"/> 

...immédiatement à côté de la case à cocher dans le cadre de mon formulaire de création de la logique.

Cela me permet de reconstruire des cases à cocher qui ont servi dans la forme, mais n'est pas sélectionnée, avec un tout petit peu de logique supplémentaire pour faire la diff de ce qui était servi et ce qui a été vérifié, vous avez ceux qui ont été décochée. La présentation est également la même dans le contenu, indépendamment de savoir si vous êtes en utilisant le HTML ou AJAX style de présentation.

En fonction de la technologie que vous utilisez côté serveur, vous pouvez utiliser cette syntaxe...

<input type="hidden" name="_fieldname[]" value="fieldvalue"/>

...pour le rendre facile à saisir ces valeurs dans une liste.

L'une des raisons pour l'utilisation de la non-standard case de sérialisation qui n'est pas abordé dans la question ou dans le courant de réponses est de seulement deserialize (changement) des champs qui ont été explicitement spécifié dans les données sérialisées - par exemple, lorsque vous utilisez jquery, la sérialisation et la désérialisation vers/à partir d'un cookie pour enregistrer et charger des prefererences.

Thomas Danemar mis en œuvre une modification à la norme serialize() méthode pour éventuellement prendre un checkboxesAsBools option: http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/ - ce qui est similaire à la mise en œuvre énumérés ci-dessus par @mydoghasworms, mais également intégrée dans la norme sérialiser.

J'ai copié sur Github dans le cas où quelqu'un a des améliorations à faire à tout moment: https://gist.github.com/1572512

En outre, le "jquery.désérialiser" plugin sera désormais correctement désérialiser case à cocher valeurs sérialisées avec checkboxesAsBools, et d'ignorer les cases qui ne sont pas mentionnés dans les données sérialisées: https://github.com/itsadok/jquery.deserialize

L'astuce consiste à intercepter le post de formulaire et modifier les cases cachées des champs de saisie.

Exemple: La Plaine De Soumettre

$('form').on("submit", function (e) {
    //find the checkboxes
    var $checkboxes = $(this).find('input[type=checkbox]');

    //loop through the checkboxes and change to hidden fields
    $checkboxes.each(function() {
        if ($(this)[0].checked) {
            $(this).attr('type', 'hidden');
            $(this).val(1);
        } else {
            $(this).attr('type', 'hidden');
            $(this).val(0);
        }
    });
});

Exemple: AJAX

Vous avez besoin de sauter à travers quelques cerceaux si vous validez le formulaire via ajax ne pas mettre à jour l'INTERFACE utilisateur.

$('form').on("submit", function (e) {
    e.preventDefault();

    //clone the form, we don't want this to impact the ui
    var $form = $('form').clone();

    //find the checkboxes
    var $checkboxes = $form.find('input[type=checkbox]');

    //loop through the checkboxes and change to hidden fields
    $checkboxes.each(function() {
        if ($(this)[0].checked) {
            $(this).attr('type', 'hidden');
            $(this).val(1);
        } else {
            $(this).attr('type', 'hidden');
            $(this).val(0);
        }
    });

    $.post("/your/path", $form.serialize());

Pour ASP.NET MVC, nous avons réussi à enregistrer un formulaire avec cases via un AJAX POST avec le suivant, qui est une combinaison de plusieurs méthodes référencées dans ce post, y compris @Jecoms suggestion:

var form = $('#myForm');
//Serialize the form into a JavaScript object using the jQuery.serializeObject plugin
//https://plugins.jquery.com/serializeObject/
var data = form.serializeObject();
//Change the submitted value of checkboxes to the value of the checked property
$('#myForm input[type=checkbox]').each( function () { data[this.name] = this.checked; } );
//For a MVC controller, convert the JS object back into a query string using jQuery.param function
data = $.param(data);
//Perform AJAX POST with the form data
$.ajax({
    async: true,
    url: 'mvcActionMethodURL',
    type: 'POST',
    data: data,
    success: function (data, textStatus, xhr) {

    },
    error: function (xhr, status, error) {

    }
});

J'ai eu un problème similaire et la suite m'a permis de recueillir toutes les forme de valeurs d'entrée et coché/décoché les cases à cocher.

var serialized = this.$('#myform input').map(function() {
return { name: this.name, id: this.id, value: this.checked ? "checked" : "false" };
});

parfois incontrôlée des moyens autres valeurs, par exemple vérifié pourrait dire oui décochée pas ou 0,1 etc cela dépend du sens que vous voulez donner.. donc peut être un autre état, en plus de "cochée signifie qu'il n'est pas dans la chaîne de requête à tous les"

"Il serait beaucoup plus facile à stocker des informations dans la base de données. Parce qu'alors le nombre de champs de Sérialiser serait égal au nombre de champs dans la table. Maintenant, je dois contrll ceux qui sont absents", vous êtes en droit c'est mon problème aussi... donc il semble que je dois vérifier pour cette inexistants valeur....

mais peut-être que cela pourrait être une solution?
http://tdanemar.wordpress.com/2010/08/24/jquery-serialize-method-and-checkboxes/

Vous Pouvez Obtenir les entrées la valeur avec jquery sérialiser

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="event_allDay" name="event_allDay" checked="checked" onchange="isChecked(this)" value="" />
<script>
    function isChecked(element) {
        $(element).val($(element).is(':checked').toString());
    }
    isChecked('#event_allDay');
</script>

Pour ceux qui utilisent le serialize() fonction:

(function ($) {
    var serialize = $.fn.serialize;

    $.fn.serialize = function () {
        let values = serialize.call(this);
        let checkboxes = [];

        checkboxes = checkboxes.concat(
            $('input[type=checkbox]:not(:checked)', this).map(
            function () {
                return this.name + '=false';
            }).get()
        );

        if(checkboxes.length > 0)
            values = checkboxes.join('&') + '&' + values;

        return values;
    };
})(jQuery);

Essayez ceci:

$(':input[type="checkbox"]:checked').map(function(){return this.valeur}).get();