Contrôle de checkbox multiples

Version imprimable

15/01/2009, 11h48
renaud26

Contrôle de checkbox multiples
Bonjour à tous,

Soit une formulaire comprenant :
Code:

1 2 <input type="checkbox" name="suppr[]" value="<?=$id?>">
Je voudrais, à la validation, donc avec onSubmit, qu'une fonction affiche un confirm du genre :

Etes-vous sûr de vouloir supprimer les lignes 2, 12, 23 ?

J'ai essayé divers trucs piochés dans la FAQ JS, mais le name="suppr[]" coince méchant...

Quelqu'un aurait une piste ?
Merci à lui.

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
25
26
27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
 
		<input type="checkbox" name="test[]" checked="checked" />
		<input type="checkbox" name="test[]" />
		<input type="checkbox" name="test[]" checked="checked"/>
		<input type="checkbox" name="test[]" />
		<input type="checkbox" name="test[]" checked="checked"/>
		<script type="text/javascript">
		var listeCheckBox = document.getElementsByName("test[]");
		var nb = 0;
		var msg = "";
		for(var i= 0 , l = listeCheckBox.length;i <l ; i++){
			nb = (listeCheckBox[i].checked) ? +1:+0;
			if(listeCheckBox[i].checked){
				msg += "La case n°"+(i+1)+ " est cochée\n";
			}
		}
		alert("il y a : "+nb+"case cochées \n"+msg);
		</script>
	</body>
</html>

Ca fait belle lurette que je me suis fait grillé, mais j'ai quand même envie de contribuer :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
   <title>obtenir un tableau de valeurs provenant de cases à cocher</title>
   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
   <style type="text/css">
   </style>
</head>
<body>
   <form id="f" method="post">
      <input id="c1" name="c" type="checkbox" value="1" />
      <input id="c2" name="c" type="checkbox" value="2" />
      <input id="c3" name="c" type="checkbox" value="3" />
      <input id="s" type="submit" value="soumettre" />
   </form>
   <script type="text/javascript">
   var Utils = {
      Evenement: {
         ajouter: function(elm, evt, fn) {
            if (document.addEventListener) {
               if (!elm.length || elm.elements) {
                  elm.addEventListener(evt, function(e) {
                     if (!fn(e)) {e.preventDefault();}
                  }, false);
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     elm[i].addEventListener(evt, function(e) {
                        if (!fn(e)) e.preventDefault();
                     }, false);
                  }
               }
            } else if (document.attachEvent) {
               if (!elm.length || elm.elements) {
                  var r = elm.attachEvent("on" + evt, fn);
                  return r;
               } else {
                  for (var i = 0, imax = elm.length; i < imax; i++) {
                     var r = elm[i].attachEvent("on" + evt, fn);
                     return r;
                  }  
               }
            }
         }
      },
      Formulaire: {
         obtenirValeur: function(elms) {
            var t = [];
            for (var i=0, imax=elms.length; i<imax; i++) {
               if (elms[i].checked) {t.push(elms[i].value)};
            }
            return t;
         }
      }
   }
   Utils.Evenement.ajouter(document, "submit", function(e){
      var elm = e.Target || e.srcElement;
      var cs = document.getElementsByName("c");
      var r = confirm(Utils.Formulaire.obtenirValeur(cs));
      return r;
   });
 
   </script>
</body>
</html>

15/01/2009, 12h36
le_chomeur

c pas un peu lourd comme code ^^ ?
suffit d'ajouter un gestionnaire d'évènement ( comme tu l'as fait ;) ) sur le submit , et juste faire un test sur le nb :)

@ Le Chomeur :

Super, merci bcp ! ça fonctionne nickel. Je l'ai modifiée légèrement pour avoir la valeur de la checkbox au lieu de son "N° d'ordre" et c'est de la balle.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function alerte_suppr(){ var listeCheckBox = document.getElementsByName("suppr[]"); var nb = 0; var msg = ""; var val = ""; for(var i= 0 , l = listeCheckBox.length;i <l ; i++){ nb = (listeCheckBox[i].checked) ? +1:+0; if(listeCheckBox[i].checked){ val = listeCheckBox[i].value; msg += "Etes-vous sûr de vouloir supprimer l\'opération N°"+(val)+ "? \n"; } } confirm(msg); }
@ franculo_caoulene : merci également pour ta contribution...mais ton code dépasse trop largement mes compétences en JS !

Bonne journée à tous.

15/01/2009, 12h53
franculo_caoulene

Citation:

Envoyé par le_chomeur

c pas un peu lourd comme code ^^ ?
suffit d'ajouter un gestionnaire d'évènement ( comme tu l'as fait ;) ) sur le submit , et juste faire un test sur le nb :)

Si, si, j'en conviens, mais j'essaie juste de montrer (promouvoir) une autre façon de coder :)