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

Question

J'utilise jQuery.serialize pour récupérer tous les champs de données d'un formulaire.

Mon problème est qu'il ne récupère pas les cases à cocher qui ne sont pas cochées.

Il comprend ceci:

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

mais pas ça

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

Comment puis-je obtenir des "valeurs" de cases à cocher non cochées?

Answer 1

Pour tirer parti de la réponse de génie d'azatoth, je l'ai légèrement étendue pour mon scénario:

     /* 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": this.value}
                    }).get()
    );
 

Answer 2

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?".

Gardez à 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>

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"?

Answer 3

Ce n'est pas le cas, car sérialiser est destiné à être utilisé comme chaîne de requête et, dans ce contexte, non coché signifie que ce n'est pas du tout dans la chaîne de requête.

Si vous voulez vraiment obtenir les valeurs des cases à cocher non cochées, utilisez: (non testé)

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

Answer 4

Si vous souhaitez ajouter des cases à cocher non sérialisées à votre chaîne de requête, ajoutez ce qui suit à votre fonction d'envoi jQuery:

 var moreinfo = '';

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

Answer 5

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.

Selon 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.