Comment soumettre décoché la case aussi

C'est un problème très commun - lorsque la case n'est pas cochée il l'habitude de l'envoyer au serveur la valeur off/faux par lui-même. Les plus populaires réponse que j'ai trouvé a été d'ajouter un champ caché avec le même nom que la case et de la valeur = false. Mais alors, quand quelqu'un, il a vérifié qu'il m'a envoyé deux valeurs.

Et je n'aimais pas ça. C'est ce que j'ai fait:

Quelque part dans le HTML:

<input type="checkbox" name="${name}" onclick="true" >

En JQuery:

Première étape est de définir des valeurs cachées sur toutes les cases qui ne sont pas contrôlés.

$(document).ready(function () {
        $(".checkbox").each(function () {
                 if ($(this).prop("checked") == undefined) {
                    $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value="off">")
                 }
              }
        )
     });

Deuxièmement, nous devons réagir sur l'utilisateur en cliquant sur la case: alors que la désélection d'ajouter un champ caché, lors de la sélection d' - supprimer en regard de la fratrie dans les DOM - nous nous attendions à ce champ caché là.

AVERTISSEMENT: lorsque les cases de bon parent, vous devriez vérifier si le frère suivant est de type hidden et puis l'enlever!:

   $(".checkbox").click(function () {
                    if ($(this).prop("checked") == undefined) {
                       $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value=off>")
                    } else {
                       $(this).next().remove();
                    }
                 }
           );

Et ça fonctionne pour moi 🙂

Je me suis retrouvé dans cette question récemment, et c'est ma solution.
- Je le faire sans champ caché.
Il suffit de changer la valeur de la case à cocher 'off', et assurez-vous qu'il est vérifié si elle est envoyée.
Note: je ne l'ai testé contre un serveur php, mais il devrait fonctionner.

        //Prepare checkboxes
    var checkboxes = document.querySelectorAll('input[type="checkbox"]')
    checkboxes.forEach(function(cbox) {
        if (!cbox.checked) { //If the checkbox is checked it keeps its value, default value is 'on' 
            cbox.value='off' //Otherwise change the value to off, or something else
            cbox.checked = true //We need to check it, so it sends the value
        }
    })

Mon formulaire est créé dynamiquement, donc en incorporant de nouveaux champs cachés aurait été assez compliqué. Pour moi, il fonctionne par modifier temporairement le type de champ dans un gestionnaire de soumission de formulaire.

myForm.addEventHandler("submit", ev => {
    for (let oField of ev.target.elements) {
        if (oField.nodeName.toUpperCase() === "INPUT" &&
                oField.type === "checkbox" &&
                ! oField.checked) {
            oField.type = "text";    //input type text will be sent
                         //After submitting, reset type to checkbox
            oReq.addEventListener("loadstart",
                        () => { oField.type = "checkbox"; });
        }
    }
});

Cela se sent un peu sale, mais il fonctionne pour mon.