web-dev-qa-db-fra.com

POST cases à cocher HTML non cochées

J'ai un tas de cases à cocher qui sont cochées par défaut. Mes utilisateurs vont probablement décocher quelques cases (le cas échéant) et laisser le reste coché.

Existe-t-il un moyen de rendre le formulaire POST les cases à cocher cochées non, plutôt que celles cochées le sont?

276
reach4thelasers

Ajoutez une entrée masquée pour la case à cocher avec un ID différent:

<input id='testName' type='checkbox' value='Yes' name='testName'>
<input id='testNameHidden' type='hidden' value='No' name='testName'>

Avant de soumettre le formulaire, désactivez l'entrée masquée en fonction de la condition cochée:

if(document.getElementById("testName").checked) {
    document.getElementById('testNameHidden').disabled = true;
}
194
vishnu

La solution que j’ai le plus aimée jusqu’à présent est de mettre une entrée cachée portant le même nom que la case à cocher qui pourrait ne pas être cochée. Je pense que cela fonctionne de sorte que si la case à cocher n'est pas cochée, la saisie masquée est toujours réussie et envoyée au serveur, mais si la case à cocher est cochée, elle remplacera la saisie masquée avant celle-ci. De cette façon, vous n'avez pas besoin de savoir quelles valeurs dans les données publiées doivent provenir de cases à cocher.

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>
437
Sam

Je l'ai résolu en utilisant JavaScript JavaScript:

<input type="hidden" name="checkboxName" value="0"><input type="checkbox" onclick="this.previousSibling.value=1-this.previousSibling.value">

Veillez à ne pas laisser d'espaces ni de sauts de ligne entre ces deux éléments d'entrée!

Vous pouvez utiliser this.previousSibling.previousSibling pour obtenir les éléments "supérieurs".

Avec PHP, vous pouvez vérifier le champ caché nommé pour 0 (non défini) ou 1 (défini).

63
Marcel Ennix

Mon favori personnel est d'ajouter un champ caché avec le même nom qui sera utilisé si la case à cocher n'est pas cochée. Mais la solution n'est pas aussi facile qu'il y paraît.

Si vous ajoutez ce code:

<form>
  <input type='hidden' value='0' name='selfdestruct'>
  <input type='checkbox' value='1' name='selfdestruct'>
</form>

Le navigateur ne se souciera pas vraiment de ce que vous faites ici. Le navigateur envoie les deux paramètres au serveur et ce dernier doit décider quoi en faire.

PHP, par exemple, prend la dernière valeur à utiliser (voir: position faisant autorité des clés de requête HTTP GET en double )

Mais les autres systèmes avec lesquels j'ai travaillé (basés sur Java) le font comme avant - ils ne vous offrent que la première valeur. .NET à la place vous donnera un tableau avec les deux éléments

Je vais essayer de tester cela avec node.js, Python et Perl à un moment ou à un autre.

22
SimonSimCity

Une technique courante consiste à transporter une variable cachée avec chaque case à cocher.

<input type="checkbox" name="mycheckbox" />
<input type="hidden" name="mycheckbox.hidden"/>

Du côté du serveur, nous détectons d’abord la liste des variables cachées et pour chacune des variables cachées, nous essayons de voir si l’entrée de case à cocher correspondante est soumise dans les données du formulaire ou non.

L'algorithme côté serveur ressemblerait probablement à ceci:

for input in form data such that input.name endswith .hidden
  checkboxName = input.name.rstrip('.hidden')
  if chceckbName is not in form, user has unchecked this checkbox

Ce qui précède ne répond pas exactement à la question, mais offre un autre moyen d’obtenir une fonctionnalité similaire.

20
Shailesh Kumar

vous n'avez pas besoin de créer un champ caché pour toutes les cases à cocher, copiez simplement mon code. Si la case n'est pas cochée, la valeur de la case à cocher sera modifiée. value assignera 0 et si la case à cocher est cochée, alors assignera value à 1.

$("form").submit(function () {

    var this_master = $(this);

    this_master.find('input[type="checkbox"]').each( function () {
        var checkbox_this = $(this);


        if( checkbox_this.is(":checked") == true ) {
            checkbox_this.attr('value','1');
        } else {
            checkbox_this.prop('checked',true);
            //DONT' ITS JUST CHECK THE CHECKBOX TO SUBMIT FORM DATA    
            checkbox_this.attr('value','0');
        }
    })
})
18
Rameez SOOMRO

Vous pouvez faire du Javascript dans l'événement submit du formulaire. C'est tout ce que vous pouvez faire cependant, il n'y a aucun moyen de faire en sorte que les navigateurs le fassent par eux-mêmes. Cela signifie également que votre formulaire va casser pour les utilisateurs sans Javascript. Mieux vaut savoir sur le serveur quelles sont les cases à cocher, vous pouvez donc en déduire que celles qui sont absentes des valeurs de formulaire postées ($_POST en PHP) ne sont pas cochées.

11
Bart van Heukelom
$('input[type=checkbox]').on("change",function(){
    var target = $(this).parent().find('input[type=hidden]').val();
    if(target == 0)
    {
        target = 1;
    }
    else
    {
        target = 0;
    }
    $(this).parent().find('input[type=hidden]').val(target);
});
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>
<p>
    <input type="checkbox" />
    <input type="hidden" name="test_checkbox[]" value="0" />
</p>

Si vous omettez le nom de la case à cocher, cela ne sera pas passé. Seul le tableau test_checkbox.

11
Jeremy

Je voudrais réellement faire ce qui suit.

Avoir mon champ de saisie caché avec le même nom avec l'entrée de case à cocher

<input type="hidden" name="checkbox_name[]" value="0" />
<input type="checkbox" name="checkbox_name[]" value="1" />

et ensuite, lorsque je poste, j’élimine d’abord les valeurs en double relevées dans le tableau $ _POST, en affichant chacune des valeurs uniques.

  $posted = array_unique($_POST['checkbox_name']);
  foreach($posted as $value){
    print $value;
  }

Je l'ai reçu d'un article retirer les valeurs en double du tablea

10
desw

"Je suis allé avec l'approche du serveur. Semble fonctionner correctement - merci. - reach4thelasers 1er décembre 09 à 15:19" Je voudrais le recommander à son propriétaire. Comme indiqué: la solution javascript dépend de la façon dont le gestionnaire de serveur (je ne l'ai pas vérifié)

tel que

if(!isset($_POST["checkbox"]) or empty($_POST["checkbox"])) $_POST["checkbox"]="something";
8
N Zhang

La plupart des réponses ici nécessitent l'utilisation de JavaScript ou de contrôles de saisie en double. Parfois, cela doit être entièrement géré côté serveur.

Je crois que la clé (prévue) pour résoudre ce problème commun est le contrôle de saisie de la soumission du formulaire.

Pour interpréter et gérer correctement les valeurs non cochées des cases à cocher, vous devez connaître les éléments suivants:

  1. Les noms des cases à cocher
  2. Le nom de l'élément d'entrée de soumission du formulaire

En vérifiant si le formulaire a été soumis (une valeur est affectée à l'élément d'entrée de soumission), toute valeur de case à cocher non cochée peut être supposée.

Par exemple:

<form name="form" method="post">
  <input name="value1" type="checkbox" value="1">Checkbox One<br/>
  <input name="value2" type="checkbox" value="1" checked="checked">Checkbox Two<br/>
  <input name="value3" type="checkbox" value="1">Checkbox Three<br/>
  <input name="submit" type="submit" value="Submit">
</form>

Lors de l'utilisation de PHP, il est assez simple de détecter les cases à cocher qui ont été cochées.

<?php

$checkboxNames = array('value1', 'value2', 'value3');

// Persisted (previous) checkbox state may be loaded 
// from storage, such as the user's session or a database.
$checkboxesThatAreChecked = array(); 

// Only process if the form was actually submitted.
// This provides an opportunity to update the user's 
// session data, or to persist the new state of the data.

if (!empty($_POST['submit'])) {
    foreach ($checkboxNames as $checkboxName) {
        if (!empty($_POST[$checkboxName])) {
            $checkboxesThatAreChecked[] = $checkboxName;
        }
    }
    // The new state of the checkboxes can be persisted 
    // in session or database by inspecting the values 
    // in $checkboxesThatAreChecked.
    print_r($checkboxesThatAreChecked);
}

?>

Les données initiales peuvent être chargées à chaque chargement de page, mais ne doivent être modifiées que si le formulaire a été soumis. Comme les noms des cases à cocher sont connus à l'avance, ils peuvent être parcourus et inspectés individuellement, de sorte que l'absence de leurs valeurs individuelles indique qu'elles ne sont pas cochées.

7
Werner

J'ai d'abord essayé la version de Sam. Bonne idée, mais cela entraîne la présence de plusieurs éléments du même nom. Si vous utilisez un code javascript qui trouve des éléments en fonction de leur nom, il renverra désormais un tableau d'éléments.

J'ai élaboré l'idée de Shailesh en PHP, cela fonctionne pour moi. Voici mon code:

/* Supprimez les champs '.hidden' si l'original est présent, utilisez la valeur '.hidden' sinon. */
 foreach ($ _POST ['frmmain'] en tant que $ field_name => $ value) 
 {
 // Ne regarde que les éléments se terminant par '.hidden' 
 if (! substr ($ nom_zone, -strlen ('. caché'))) {
 break; 
} 
 
 // obtenir le nom sans '.hidden' 
 $ real_name = substr ($ key, strlen ($ nom_zone) - strlen ('. hidden')); 
 
 // Créez un "faux" original. champ avec la valeur dans '.hidden' si un original n'existe pas 
 if (! array_key_exists ($ real_name, $ POST_copy)) {
 $ _POST [$ real_name] = $ value; 
} 
 
 // Supprimer l'élément '.hidden' 
 Unset ($ _ POST [$ field_name]); 
} 
6
Wouter

J'aime aussi la solution qui consiste à poster un champ de saisie supplémentaire, l'utilisation de JavaScript me paraissant un peu compliquée.

Selon ce que vous utilisez pour votre backend, cela dépend de la première entrée.

Pour un serveur serveur où la première occurrence est utilisée (JSP), procédez comme suit.

  <input type="checkbox" value="1" name="checkbox_1"/>
  <input type="hidden" value="0" name="checkbox_1"/>


Pour un serveur serveur où la dernière occurrence est utilisée (PHP, Rails), procédez comme suit.

  <input type="hidden" value="0" name="checkbox_1"/>
  <input type="checkbox" value="1" name="checkbox_1"/>


Pour un serveur dorsal où toutes les occurrences sont stockées dans un type de données de liste ([], array). (Python/Zope)

Vous pouvez poster dans l'ordre que vous voulez, il vous suffit d'essayer d'obtenir la valeur de l'entrée avec l'attribut de type checkbox. Ainsi, le premier index de la liste si la case à cocher était avant l'élément masqué et le dernier index si la case à cocher était après l'élément masqué.


Pour un serveur dorsal où toutes les occurrences sont concaténées avec une virgule (ASP.NET/IIS), vous devrez (scinder/exploser) la chaîne en utilisant une virgule comme délimiteur pour créer un type de données de liste. ([])

Maintenant, vous pouvez essayer de saisir le premier index de la liste si la case à cocher était avant l'élément caché et de récupérer le dernier index si la case était après l'élément masqué.

Backend parameter handling

source de l'image

6
TarranJones

J'utilise ce bloc de jQuery, qui ajoutera une entrée masquée lors de l'envoi à chaque case à cocher non cochée. Cela vous garantit de toujours obtenir une valeur soumise pour chaque case à cocher, à chaque fois, sans encombrer votre balisage et risquer de vous faire oublier de le faire sur une case à cocher que vous ajouterez plus tard. Il est également indépendant de la pile de back-end (PHP, Ruby, etc.) que vous utilisez.

// Add an event listener on #form's submit action...
$("#form").submit(
    function() {

        // For each unchecked checkbox on the form...
        $(this).find($("input:checkbox:not(:checked)")).each(

            // Create a hidden field with the same name as the checkbox and a value of 0
            // You could just as easily use "off", "false", or whatever you want to get
            // when the checkbox is empty.
            function(index) {
                var input = $('<input />');
                input.attr('type', 'hidden');
                input.attr('name', $(this).attr("name")); // Same name as the checkbox
                input.attr('value', "0"); // or 'off', 'false', 'no', whatever

                // append it to the form the checkbox is in just as it's being submitted
                var form = $(this)[0].form;
                $(form).append(input);

            }   // end function inside each()
        );      // end each() argument list

        return true;    // Don't abort the form submit

    }   // end function inside submit()
);      // end submit() argument list
6
Matt Holden

Vous pouvez également intercepter l'événement form.submit et effectuer une vérification inversée avant de soumettre

$('form').submit(function(event){
    $('input[type=checkbox]').prop('checked', function(index, value){
        return !value;
    });
});
5
Jimchao

Je sais que cette question a 3 ans mais j'ai trouvé une solution qui, à mon avis, fonctionne assez bien.

Vous pouvez vérifier si la variable $ _POST est assignée et l'enregistrer dans une variable.

$value = isset($_POST['checkboxname'] ? 'YES' : 'NO';

la fonction isset () vérifie si la variable $ _POST est assignée. En logique, si cette option n'est pas affectée, la case à cocher n'est pas cochée.

4
Riley Stadel
$('form').submit(function () {
    $(this).find('input[type="checkbox"]').each( function () {
        var checkbox = $(this);
        if( checkbox.is(':checked')) {
            checkbox.attr('value','1');
        } else {
            checkbox.after().append(checkbox.clone().attr({type:'hidden', value:0}));
            checkbox.prop('disabled', true);
        }
    })
});
4
Sajjad Shirazy

Je vois que cette question est ancienne et a beaucoup de réponses, mais je vais quand même donner mon sou. Mon vote est pour la solution javascript sur l'événement 'submit' du formulaire, comme certains l'ont souligné. Pas de doubler les entrées (surtout si vous avez des noms longs et des attributs avec du code php mélangé avec du html), pas de problème côté serveur (cela nécessiterait de connaître tous les noms de champs et de les vérifier un par un), il suffit de récupérer tous les éléments non vérifiés , attribuez-leur une valeur 0 (ou ce dont vous avez besoin pour indiquer un statut "non vérifié"), puis remplacez leur attribut "vérifié" par true

    $('form').submit(function(e){
    var b = $("input:checkbox:not(:checked)");
    $(b).each(function () {
        $(this).val(0); //Set whatever value you need for 'not checked'
        $(this).attr("checked", true);
    });
    return true;
});

de cette façon, vous aurez un tableau $ _POST comme ceci:

Array
(
            [field1] => 1
            [field2] => 0
)
4
MarcoSpada

Je préférerais rassembler le $ _POST

if (!$_POST['checkboxname']) !$_POST['checkboxname'] = 0;

cela ne dérange pas que, si le POST ne possède pas la valeur 'checkboxname', il n'a pas été vérifié, vous pouvez donc lui attribuer une valeur.

vous pouvez créer un tableau de vos valeurs ckeckbox et créer une fonction qui vérifie si des valeurs existent, sinon, les commandes décochées ne sont pas cochées et vous pouvez attribuer une valeur

2
Felipe Gonzalez

Ce que j'ai fait était un peu différent. J'ai d'abord changé les valeurs de toutes les cases à cocher non cochées. Vers "0", puis tous les sélectionnés, donc la valeur serait soumise.

function checkboxvalues(){
  $("#checkbox-container input:checkbox").each(function({ 
    if($(this).prop("checked")!=true){
      $(this).val("0");
      $(this).prop("checked", true);
    }
  });
}
2
Seborreia

Les cases à cocher représentent généralement des données binaires stockées dans la base de données sous forme de valeurs Oui/Non, Y/N ou 1/0. Les cases à cocher HTML ont une nature incorrecte pour envoyer de la valeur au serveur uniquement si la case à cocher est cochée! Cela signifie que le script de serveur d'un autre site doit savoir à l'avance quelles sont toutes les cases à cocher possibles sur une page Web afin de pouvoir stocker des valeurs positives (cochées) ou négatives (non cochées). En réalité, seules les valeurs négatives posent problème (lorsque l'utilisateur décoche la valeur précédemment vérifiée - comment le serveur peut-il le savoir lorsque rien n'est envoyé s'il ne sait pas à l'avance que ce nom doit être envoyé). Si vous avez un script côté serveur qui crée de manière dynamique le script UPDATE, il y a un problème car vous ne savez pas ce que toutes les cases à cocher doivent être reçues afin de définir la valeur Y pour la case cochée et la valeur N pour les cases non cochées (non reçues).

Puisque je stocke les valeurs 'Y' et 'N' dans ma base de données et que je les représente via les cases à cocher cochées et non cochées de la page, j'ai ajouté un champ masqué pour chaque valeur (case à cocher) avec les valeurs 'Y' et 'N', puis j'utilise les cases à cocher uniquement à des fins visuelles. représentation, et utilisez la fonction JavaScript simple check () pour définir la valeur if selon la sélection.

<input type="hidden" id="N1" name="N1" value="Y" />
<input type="checkbox"<?php if($N1==='Y') echo ' checked="checked"'; ?> onclick="check(this);" />
<label for="N1">Checkbox #1</label>

utiliser un écouteur JavaScript onclick et appeler la fonction check () pour chaque case à cocher de ma page Web:

function check(me)
{
  if(me.checked)
  {
    me.previousSibling.previousSibling.value='Y';
  }
  else
  {
    me.previousSibling.previousSibling.value='N';
  }
}

De cette façon, les valeurs 'Y' ou 'N' sont toujours envoyées au script côté serveur, il sait quels champs doivent être mis à jour et il n'est pas nécessaire de convertir la valeur "on" de checbox en "Y" ou de cocher la case "non reçu" en "N '.

REMARQUE: les espaces ou les nouvelles lignes sont également des frères et soeurs, donc il me faut .previousSibling.previousSibling.value. S'il n'y a pas d'espace entre, alors seulement .previousSibling.value


Vous n'avez pas besoin d'ajouter explicitement onclick listener comme auparavant, vous pouvez utiliser la bibliothèque jQuery pour ajouter de manière dynamique un écouteur de clic avec la fonction permettant de modifier la valeur de toutes les cases à cocher de votre page:

$('input[type=checkbox]').click(function()
{
  if(this.checked)
  {
    $(this).prev().val('Y');
  }
  else
  {
    $(this).prev().val('N');
  }
});
1
sbrbot

Exemple sur les actions Ajax est (': vérifié') utilisé jQuery au lieu de .val ();

            var params = {
                books: $('input#users').is(':checked'),
                news : $('input#news').is(':checked'),
                magazine : $('input#magazine').is(':checked')
            };

params aura la valeur TRUE OR FALSE ..

1
Mehmet Ali Uysal

Le problème avec les cases à cocher est que si elles ne sont pas cochées, elles ne sont pas affichées avec votre formulaire. Si vous cochez une case et postez un formulaire, vous obtiendrez la valeur de la case dans la variable $ _POST que vous pourrez utiliser pour traiter un formulaire. Si cette case n'est pas cochée, aucune valeur ne sera ajoutée à la variable $ _POST.

Dans PHP, vous résoudriez normalement ce problème en effectuant une vérification isset () sur votre élément de case à cocher. Si l'élément que vous attendez n'est pas défini dans la variable $ _POST, nous savons que la case à cocher n'est pas cochée et que la valeur peut être false.

if(!isset($_POST['checkbox1']))
{
     $checkboxValue = false;
} else {
     $checkboxValue = $_POST['checkbox1'];
}

Mais si vous avez créé un formulaire dynamique, vous ne connaîtrez pas toujours l'attribut name de vos cases à cocher. Si vous ne connaissez pas le nom de la case à cocher, vous ne pouvez pas utiliser la fonction isset pour vérifier si celui-ci a été envoyé avec la variable $ _POST.

1
Daniel Galecki

Il existe une meilleure solution de contournement. Tout d'abord, attribuez l'attribut name uniquement aux cases à cocher cochées. Cliquez ensuite sur submit, à travers un script JavaScript function pour cocher toutes les cases non cochées. Ainsi, lorsque vous submit, seuls ceux-ci seront récupérés dans form collection ceux qui possèdent la propriété name.

  //removing name attribute from all checked checkboxes
                  var a = $('input:checkbox:checked');
                   $(a).each(function () {
                       $(this).removeAttr("name");        
                   });

   // checking all unchecked checkboxes
                   var b = $("input:checkbox:not(:checked)");
                   $(b).each(function () {
                       $(this).attr("checked", true);
                   });

Avantage: Pas besoin de créer des cases cachées supplémentaires et de les manipuler.

0
Gyanesh Gouraw

Toutes les réponses sont excellentes, mais si vous avez plusieurs cases dans un formulaire portant le même nom et que vous souhaitez afficher le statut de chaque case. Ensuite, j'ai résolu ce problème en plaçant un champ caché avec la case à cocher (nom lié à ce que je veux).

<input type="hidden" class="checkbox_handler" name="is_admin[]" value="0" />
<input type="checkbox" name="is_admin_ck[]" value="1" />

puis contrôlez le statut de changement de case à cocher en utilisant le code ci-dessous:

$(documen).on("change", "input[type='checkbox']", function() {
    var checkbox_val = ( this.checked ) ? 1 : 0;
    $(this).siblings('input.checkbox_handler').val(checkbox_val);
});

maintenant, lors du changement d'une case à cocher, la valeur du champ masqué associé sera modifiée. Et sur le serveur, vous ne pouvez rechercher que des champs cachés au lieu de cases à cocher.

J'espère que cela aidera quelqu'un à avoir ce type de problème. bravo :)

0
Imran Khan

Cette solution est inspirée de celle de @ desw.

Si vos noms d'entrée sont en "style de formulaire", vous perdrez l'association d'index de tableau avec vos valeurs de chekbox dès qu'une case à cocher est cochée, en incrémentant cette "dissociation" d'une unité chaque fois qu'une case à cocher est cochée. Cela peut être le cas d'un formulaire pour insérer quelque chose comme des employés composés de certains champs, par exemple:

<input type="text" name="employee[]" />
<input type="hidden" name="isSingle[] value="no" />
<input type="checkbox" name="isSingle[] value="yes" />

Si vous insérez trois employés à la fois et que les premier et deuxième sont célibataires, vous vous retrouverez avec un tableau isSingle à 5 éléments, de sorte que vous ne pourrez pas effectuer une itération simultanée dans les trois tableaux de pour insérer, par exemple, des employés dans une base de données.

Vous pouvez surmonter cela avec un post-traitement de tableau facile. J'utilise PHP sur le serveur et je l'ai fait:

$j = 0;
$areSingles = $_POST['isSingle'];
foreach($areSingles as $isSingle){
  if($isSingle=='yes'){
    unset($areSingles[$j-1]);
  }
  $j++;
}
$areSingles = array_values($areSingles);
0
Pere

Cette solution est donc excessive pour cette question, mais elle m’a aidé lorsque j’avais la même case à cocher qui s’est produite à plusieurs reprises pour différentes lignes d’une table. J'avais besoin de connaître la rangée représentée par la case à cocher et de connaître l'état de la case à cocher (cochée/décochée).

Ce que j'ai fait est de supprimer l'attribut name de mes entrées de case à cocher, de leur attribuer la même classe et de créer une entrée masquée contenant l'équivalent JSON des données.

HTML

 <table id="permissions-table">
    <tr>
        <td>
            <input type="checkbox" class="has-permission-cb" value="Jim">
            <input type="checkbox" class="has-permission-cb" value="Bob">
            <input type="checkbox" class="has-permission-cb" value="Suzy">
        </td>
    </tr>
 </table>
 <input type="hidden" id="has-permissions-values" name="has-permissions-values" value="">

Javascript pour fonctionner sur le formulaire de soumission

var perms = {};
$(".has-permission-checkbox").each(function(){
  var userName = this.value;
  var val = ($(this).prop("checked")) ? 1 : 0
  perms[userName] = {"hasPermission" : val};
});
$("#has-permissions-values").val(JSON.stringify(perms));

La chaîne json sera passée avec le formulaire sous la forme $ _POST ["has-permissions-values"]. En PHP, décodez la chaîne dans un tableau et vous aurez un tableau associatif contenant chaque ligne et la valeur true/false pour chaque case à cocher correspondante. Il est alors très facile de parcourir et de comparer les valeurs actuelles de la base de données.

0
Tmac

Je préfère rester avec des solutions ne nécessitant pas de javascript (et oui, je sais qu'il y en a qui me classent maintenant dans la catégorie luddite), mais si vous êtes comme moi, vous souhaitez pouvoir afficher un paramètre par défaut/initial pour une case à cocher et le faire tenir ou mettre à jour en fonction du formulaire soumis, essayez ceci (construit sur quelques idées ci-dessus):

Définissez les variables déterminant l'état initial de la case à cocher, puis utilisez les vérifications du serveur pour déterminer l'affichage après chaque soumission du formulaire.

L'exemple ci-dessous crée un tableau de tableaux (à utiliser dans WordPress; fonctionne également bien ailleurs), puis détermine l'état de la case à cocher à l'aide d'un script de serveur sans utiliser de champs cachés ni de javascript.

<?php

$options_array = array (
    array('list_companies_shortcode' , 'shortcode_list_companies' , 'List Companies Shortcode'),
    array('list_contacts_shortcode' , 'shortcode_list_contacts' , 'List Contacts Shortcode'),
    array('test_checkbox_1' , 'checked' , 'Label for Checkbox 1' , 'checkbox' , 'Some text to instruct the user on this checkbox use' ),
    array('test_checkbox_2' , '' , 'Label for Checkbox 2' , 'checkbox' , 'Some other text to instruct the user on this checkbox use' )
 ) ;


$name_value_array = array() ;
$name_label_array = array() ;
$field_type_array = array() ;
$field_descriptor_array = array() ;
foreach ( $options_array as $option_entry ) {
    $name_value_array[ $option_entry[0] ] = $option_entry[1] ;
    $name_label_array[ $option_entry[0] ] = $option_entry[2] ;
    if ( isset( $option_entry[3] ) ) {
        $field_type_array[ $option_entry[0] ] = $option_entry[3] ;
        $field_descriptor_array[ $option_entry[0] ] = $option_entry[4] ;
    } else {
        $field_type_array[ option_entry[0] ] = 'text' ;
        $field_descriptor_array[ $option_entry[0] ] = NULL ;
    } 
}

echo "<form action='' method='POST'>" ;
    foreach ( $name_value_array as $setting_name => $setting_value ) {
        if ( isset( $_POST[ 'submit' ] ) ) {
            if ( isset( $_POST[ $setting_name ] ) ) {
                $setting_value = $_POST[ $setting_name ] ;
            } else {
                $setting_value = '' ;
            }
        }   
        $setting_label = $option_name_label_array[ $setting_name ] ;
        $setting_field_type = $field_type_array[ $setting_name ] ;
        $setting_field_descriptor = $field_descriptor_array [ $setting_name ] ;
        echo "<label for=$setting_name >$setting_label</label>" ;
        switch ( $setting_field_type ) {
            case 'checkbox':
                echo "<input type='checkbox' id=" . $setting_name . " name=" . $setting_name . " value='checked' " . $setting_value . " >(" . $setting_field_descriptor . ")</input><br />" ;
                break ;
            default:
                echo "<input type='text' id=" . $setting_name . " name=" . $setting_name . " value=" . $setting_value . " ></input><br />" ;
        }
    }
    echo "<input type='submit' value='Submit' name='submit' >" ;
echo "</form>" ;
0
Ramblin

Cela ne peut être accompli qu'avec du javascript, car les cases à cocher non cochées ne sont pas transmises. Donc, vous avez besoin de javascript, par exemple. en coulisse ajoute des champs cachés en décochant une case à cocher. Sans JavaScript, cela ne pourrait pas être fait.

0
RSeidelsohn

version jQuery de la réponse de @ vishnu.

if($('#testName').is(":checked")){
    $('#testNameHidden').prop('disabled', true);
}

Si vous utilisez jQuery 1.5 ou une version antérieure, utilisez la fonction .attr () au lieu de .prop ()

0
0x1ad2
<input type="checkbox" id="checkbox" name="field_name" value="1">

Vous pouvez faire le tour côté serveur, sans utiliser de champs cachés,
Utilisation de l’opérateur ternaire:

isset($_POST['field_name']) ? $entity->attribute = $_POST['field_name'] : $entity->attribute = 0;

Utilisation d'un opérateur IF normal:

if (isset($_POST['field_name'])) {
    $entity->attribute = $_POST['field_name'];
} else {
    $entity->attribute = 0;
}
0
micaelsf
function SubmitCheckBox(obj) {
     obj.value   = obj.checked ? "on" : "off";
     obj.checked = true;
     return obj.form.submit();
}

<input type=checkbox name="foo" onChange="return SubmitCheckBox(this);">
0
ledav.net

Vous pouvez ajouter des éléments cachés avant de soumettre le formulaire.

$('form').submit(function() {
  $(this).find('input[type=checkbox]').each(function (i, el) {
    if(!el.checked) {
      var hidden_el = $(el).clone();
      hidden_el[0].checked = true;
      hidden_el[0].value = '0';
      hidden_el[0].type = 'hidden'
      hidden_el.insertAfter($(el));
    }
  })
});
0
SergA

@cpburnz a eu raison mais pour beaucoup de code, voici la même idée en utilisant moins de code:

JS:

// jQuery OnLoad
$(function(){
    // Listen to input type checkbox on change event
    $("input[type=checkbox]").change(function(){
        $(this).parent().find('input[type=hidden]').val((this.checked)?1:0);
    });
});

HTML (notez le nom du champ en utilisant un nom de tableau):

<div>
    <input type="checkbox" checked="checked">
    <input type="hidden" name="field_name[34]" value="1"/>
</div>
<div>
    <input type="checkbox">
    <input type="hidden" name="field_name[35]" value="0"/>
</div>
<div>

Et pour PHP:

<div>
    <input type="checkbox"<?=($boolean)?' checked="checked"':''?>>
    <input type="hidden" name="field_name[<?=$item_id?>]" value="<?=($boolean)?1:0?>"/>
</div>
0
Rodrigo Polo

Cela peut paraître idiot, mais cela fonctionne pour moi. L'inconvénient principal est que visuellement est un bouton radio, pas une case à cocher, mais fonctionne sans javascript.

HTML

Initialy checked
<span><!-- set the check attribute for the one that represents the initial value-->
<input type="radio" name="a" value="1" checked>
<input type="radio" name="a" value="0">
</span>

<br/>
Initialy unchecked
<span><!-- set the check attribute for the one that represents the initial value-->
<input type="radio" name="b" value="1">
<input type="radio" name="b" value="0" checked>
</span>

et CSS

span input
{position: absolute; opacity: 0.99}

span input:checked
{z-index: -10;}

span input[value="0"]
{opacity: 0;}

violon ici

J'aimerais entendre le moindre problème avec ce code, car je l'utilise en production.

0
frag

Si vous souhaitez soumettre un tableau de valeurs de case à cocher (y compris les éléments non cochés), vous pouvez essayer quelque chose comme ceci:

<form>
<input type="hidden" value="0" name="your_checkbox_array[]"><input type="checkbox">Dog
<input type="hidden" value="0" name="your_checkbox_array[]"><input type="checkbox">Cat
</form>

$('form').submit(function(){
    $('input[type="checkbox"]:checked').prev().val(1);
});
0
Michael

Lorsque la case à cocher n'est pas cochée lors de la soumission, mettez à jour la valeur de la case à cocher sur "NON" et définissez "vérifié" = "VRAI".

https://jsfiddle.net/pommyk/8d9jLrvo/26/

$(document).ready(function() 
{
  function save() 
  {
    if (document.getElementById('AgeVerification').checked == false) 
    {
      document.getElementById('AgeVerification').value = 'no';
      document.getElementById('AgeVerification').checked = true;     
    }
  }
  document.getElementById("submit").onclick = save;
})
0
pkamathk