Comment utiliser jQuery pour saisir les valeurs des cases à cocher et les cracher dans un autre champ de formulaire

Question

J'ai un formulaire qui contient un certain nombre de cases à cocher. Avant de soumettre le formulaire, je voudrais saisir les valeurs des cases à cocher et les coller dans un champ de texte, puis soumettre.

donc je pourrais avoir: rouge orange X Jaune Bleu X Vert

Et je voudrais mon textfield finir avec le contenu « Jaune, Vert ».

Cela ne semble pas trop compliqué, mais je suis totalement hors de ma ligue. J'utilise déjà jQuery pour quelques autres choses, j'ai donc le framework prêt, si cela rend la chose plus facile.

Merci pour tous les conseils -

Answer 1

Il suffit d'utiliser ce code:

$(function(){ 
    $('#YourFormID').bind('submit',function(){ 
     var serializedCheckboxes = ''; 
     $("input[type=checkbox]").each(function() { 
     if($(this).attr("checked")) { 
      serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value"); 
     } 
     }); 
     $("input[name=allchecks]").attr("value", serializedCheckboxes); 
    }); 
}); 

Il commence lorsque la page est chargée et se lier à l'événement « Soumettre » de votre formulaire de fonction correcte

Answer 2

premier bidouille à (sans test):

var serializedCheckboxes = ''; 
$("input type='checkbox'").each(function() { 
if($(this).attr("checked")) { 
    serializedCheckboxes += $(this).attr("value") + ','; 
} 
}); 

$("input name='allchecks').attr("value", serializedCheckboxes); 

Answer 3

fix au code Josh:

var serializedCheckboxes = ''; 
$("input[type=checkbox]").each(function() { 
if($(this).attr("checked")) { 
    serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value"); 
} 
}); 

$("input[name=allchecks]").attr("value", serializedCheckboxes); 

Après ma solution vous ne devriez pas obtenir supplémentaire "," après la dernière option.

Answer 4

Ainsi, d'autres améliorations. Ajoutez un nom de classe (dans mon exemple "colorCheckBoxes") à toutes les cases avec des couleurs dans votre formulaire (si des cases à cocher existent) - cela évite les problèmes lorsque vous souhaitez utiliser d'autres cases dans votre formulaire. Ensuite, utilisez ce code:

$(function(){ 
    $('#YourFormID').bind('submit',function(){ 
     var serializedCheckboxes = ''; 
     $(this).find("input[type=checkbox]").filter('.colorCheckBoxes').each(function() { 
     if($(this).attr("checked")) { 
      serializedCheckboxes += (serializedCheckboxes != '' ? ', ' : '') + $(this).attr("value"); 
     } 
     }); 
     if (serializedCheckboxes != '') 
      $(this).find("input[name=allchecks]").attr("value", serializedCheckboxes); 
    }); 
});