Ne pas récupérer la valeur d'une checkbox non cochée

Version imprimable

1 pièce(s) jointe(s)

bonjour
je creer un formulaire en html css et javascript.
j ai une liste de 4 checkbox et je souhaite ne recuperer que les valeur des case cochée....
comme dans lexemple ci dessous
Pièce jointe 164222

je souhaite que seul les fruits coché ( pommes dans l exemple ci dessus) n'apparaisse dans mon "text area"

Code:

1
2
3
4
var nombre = '';
function copier(nombre1, nombre2,nombre3, nombre4) {
      document.getElementById('texte-copie').value =  'fruits utlisé:\n' +'       '+ nombre1 +'\n'+'       '+ nombre2 +'\n'+'       '+ nombre3 +'\n'+'       '+ nombre4 +'\n' ;
}

Code:

1
2
3
4
5
6
7
8
9
10
11
<p>
J'ai utilisé les fruits suivant:
<FORM>
<input type="checkbox" name="checkbox1" id="nombre1" value="pommes">pommes
<input type="checkbox" name="checkbox2" id="nombre2" value="fraises">fraises
<input type="checkbox" name="checkbox3" id="nombre3" value="poires">poires
<input type="checkbox" name="checkbox4" id="nombre4" value="cerises">cerises
</FORM>
   <input type="button" value="Envoyer dans la case" onclick="copier(document.getElementById('nombre1').value, document.getElementById('nombre2').value, document.getElementById('nombre3').value, document.getElementById('nombre4').value)" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>

d'avance merci :D

Le temps que quelqu'un apporte la solution en js pure, voici une version avec jQuery.

Exemple : http://jsfiddle.net/ezdo6ca5/

Code:

1
2
3
4
5
6
7
8
9
10
<p>J'ai utilisé les fruits suivant:
<FORM id="form_fruits">
<input type="checkbox" name="checkbox1" id="nombre1" value="pommes">pommes
<input type="checkbox" name="checkbox2" id="nombre2" value="fraises">fraises
<input type="checkbox" name="checkbox3" id="nombre3" value="poires">poires
<input type="checkbox" name="checkbox4" id="nombre4" value="cerises">cerises
</FORM>
   <input type="button" value="Envoyer dans la case" id="bt_envoyer" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$("#bt_envoyer").click(function(){    
    $("#texte-copie").empty();
    elems = $("#form_fruits input");
 
 
    $("#form_fruits input").each(function(index) {
        if (elems[index].checked)
            $("#texte-copie").append(elems[index].value + '\n');
    });
 
 
});

18/12/2014, 15h52
SpaceFrog

Code:

$("#form_fruits :checkbox:checked").each

La version Javascript:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> /* <![CDATA[ */ (function() { // on encapsule window.addEventListener('load', function() { // on ajoute la gestion de l'événement "load" à l'élément window document.getElementById('bsend').addEventListener('click', function() { // on ajoute la gestion de l'événement "click" au bouton var fruitListText = 'fruits utilisés:\n'; var currentFruitNode; for (var i=1; i<5; i++) { currentFruitNode = document.getElementById('nombre' + i); if (currentFruitNode.checked) fruitListText += ' ' + currentFruitNode.value + '\n'; } document.getElementById('texte-copie').value = fruitListText; }, false); }, false); })(); /* ]]> */ </script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <p>J'ai utilisé les fruits suivant:</p> <form action=""> <div> <input type="checkbox" name="checkbox1" id="nombre1" value="pommes"/>pommes <input type="checkbox" name="checkbox2" id="nombre2" value="fraises"/>fraises <input type="checkbox" name="checkbox3" id="nombre3" value="poires"/>poires <input type="checkbox" name="checkbox4" id="nombre4" value="cerises"/>cerises <input type="button" id="bsend" value="Envoyer dans la case" /> </div> <p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p> </form>
L'idée est de séparer le code javascript du code html, donc plus d'attributs onclick dans les balises, on utilise les gestionnaires d'événements. C'est à dire que l'on attache à un élément une fonction qui se déclenche lors d'un événement particulier, par exemple le chargement de la page, un clique de souris, un survol, la perte du focus, l'appui sur une touche...

Pour définir un gestionnaire d'événement on utilise addEventListener.
Dans le code présent, j'ai rajouté un attribut id au bouton pour pouvoir l'atteindre plus facilement ce qui donne document.getElementById('bsend').addEventListener('click', function() {...}, false);Le code de la fonction se contente de passer en revue chaque checkbox et de tester si elles sont cochées. Dans ce cas le texte est ajouté à fruitListText.

Ensuite cette partie de code est placée dans le corps de la fonction d'un autre gestionnaire d'événement window.addEventListener('load', function() {. Cette événement se déclenche quand la page est chargée, ce qui assure que tous les éléments soient disponibles. (sinon on risque de se référer à un élément qui n'existe pas, parce qu'il n'est pas encore chargé.)

Pour finir, on encapsule le tout dans (function(){...})(); pour ne pas polluer l'espace de nom. En effet, toute variable utilisée dans cette "capsule" ne sera pas accessible de l'extérieur, ce qui est pratique si on veut ajouter d'autres scripts en évitant que des variables portant le même nom ne posent problème.

Ce script n'est qu'un exemple, il est loin d'être parfait, en vrac:
Les noms de variables et d'ids en franglais c'est pas terrible, il faut mieux faire soit l'un soit l'autre. (Je penche plutôt pour l'anglais qui est plus concis et qui ne nécessite que les lettres ascii.)
La boucle for avec le nombre 5 à ne pas dépasser codé en dur n'est pas très heureuse, il y a des manières plus malines de procéder, ou en changeant la structure du code html.
Ce code ne fonctionnera pas sur les anciennes versions d'internet explorer (jusqu'à la version 8 incluse) pour la simple raison que addEventListener n'existe pas pour ces versions qui utilisent à la place la méthode propriétaire attachEvent.
À la place de window.addEventListener('load'... qui doit attendre que la totalité de la page soit chargée (médias inclus), on pourra lui préférer document.addEventListener('DOMContentLoaded', ... issu des spécifications html5, qui se déclenche dés que le code html et les scripts sont chargés.

Concernant jQuery:

À coté un code en "pur" javascript semble bien verbeux. En effet, jQuery permet d'exprimer les choses de manière beaucoup plus concise et d'atteindre les divers éléments d'une page facilement grâce à ses sélecteurs. Mais ce n'est pas juste le sucre syntaxique de jQuery qui fait son succès, c'est aussi sa capacité à gommer les différences entre navigateurs. Avec jQuery, le problème de compatibilité évoqué précédemment ne se pose plus, car toutes ces différences sont gérées en amont et rendues invisible à l'utilisateur.

Néanmoins, faire l'apprentissage du "pur" javascript n'est pas une mauvaise chose loin de là.

Juste pour m'amuser ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var copier_fruits;
// ES5 browsers
if ( Array.prototype.filter &&
     Array.prototype.map ) {
    copier_fruits = function copier_fruits ( fruits ) {
        var filter = Array.prototype.filter;
        document.getElementById("texte-copie").value = "fruits utilisés:\n" 
                + filter.call(fruits, function(chkbox){return chkbox.checked})
                    .map(function(chkbox){return chkbox.value})
                    .join("      ");
    }
} 
// ES3 browsers
else {
    copier_fruits = function copier_fruits ( fruits ) {
        var fruits_utilisés = [];
        for( var i = 0, e = fruits.length, f; i < e; ++i ) {
            if ( (f = fruits[i]).checked )
                fruits_utilisés.push(f.value);
        }
        document.getElementById("texte-copie").value = "fruits utilisés:\n" 
                    + fruits_utilisés.join("      ");
    }
}

Code:

1
2
3
4
5
6
7
8
9
10
11
<p>
    J'ai utilisé les fruits suivant:
    <form name="ingrédients">
        <input type="checkbox" name="fruits" value="pommes">pommes
        <input type="checkbox" name="fruits" value="fraises">fraises
        <input type="checkbox" name="fruits" value="poires">poires
        <input type="checkbox" name="fruits" value="cerises">cerises
    </form>
    <input type="button" value="Envoyer dans la case" onclick="copier_fruits(document.forms['ingrédients'].elements['fruits'])" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="30" rows="6" ></textarea></p>

Ma version avec ce que lysandro m'a appris hier ;)

Code:

1
2
3
4
5
6
7
8
  <form name="ingrédients"> 
     <p>J'ai utilisé les fruits suivants:</p>
        <input type="checkbox" name="fruits" value="pommes">pommes
        <input type="checkbox" name="fruits" value="fraises">fraises
        <input type="checkbox" name="fruits" value="poires">poires
        <input type="checkbox" name="fruits" value="cerises">cerises
        <input type="submit" value="Envoyer dans la case" />
    </form>

Code:

1
2
3
4
5
6
document.forms.ingrédients.onsubmit = function(e){
   document.getElementById('texte-copie').value = [].reduce.call(this.fruits, function(out, fruit){
      return fruit.checked ? out + fruit.value + '\n\t' : out;
   }, 'fruits utilisés:\n\t');    
   return false;
};

19/12/2014, 17h06
Golgotha

Pas mal SylvainPV :applo:

Je sauvegarde ça dans un coin de ma tête :)
19/12/2014, 23h41
lysandro

Joli :D