name checkbox multiple

**kOrt3x** · 15/04/2011, 14h25

Bonjour,

J'ai une page HTML qui contient une liste de checkbox qui ont pour nom name="box".
Certaines checkbox peuvent être répéter x fois.

Comment puis-je savoir sur quel checkbox j'ai cliqué ?

j'ai déjà une function qui regarde si tous les checkbox sont cochées :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
function checkAllBox(){
                var boxes = document.info.box.length;
                for (i = 0; i < boxes; i++){
                    if(!document.info.box[i].checked){
                        //alert("Contrôle incomplet !!");
                        document.info.box[i].focus();
                        return false;
                    }
                }
                return true;
            }

Sachant que je dois faire un contrôle sur chaque checkbox, mais le tous est de savoir quelle checkbox j'ai cliqué.

merci.

**RomainVALERI** · 15/04/2011, 16h42

Les checkboxes sont-elles présentes dans le HTML "en dur" ou bien ajoutées dynamiquement par JS ?

En tout cas, mets leur un id incrémenté et récupère le dans le gestionnaire onclick avec quelque chose comme

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
   var cible = e.target || e.srcElement;
var checkId = e.id;

("e" étant ici le nom donné au paramètre event du gestionnaire)

**Bovino** · 15/04/2011, 18h43

Oui, ou en faisant passant l'objet cliqué en paramètre :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="checkbox" name="box" value="XXX" onclick="checkAllBox(this)" />

**kOrt3x** · 15/04/2011, 22h17

Merci pour vos réponses, mais dans mon code, on peut avoir plusieurs fois la même checkbox :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<input type="checkbox" name="box" value="Nom" onclick="checkAllBox(this)" />Nom (1)
<input type="checkbox" name="box" value="Nom" onclick="checkAllBox(this)" />Nom (2)
<input type="checkbox" name="box" value="Nom" onclick="checkAllBox(this)" />Nom (3)

Comme savoir que je clique sur le Nom (2) sachant qu'ils ont le même name ?

**NoSmoking** · 16/04/2011, 09h29

Bonjour,
il me paraît comme maladroit d'utiliser la même value pour tout les CHECKBOX, après tout c'est ce sont ces value qui sont soumises.

Lorsque tu passes en paramètre le this à la fonction tu peux de ce fait récupérer cette value.

Il existe aussi la notion de balise LABEL, qui accroît l'accessibilité, et qui peut te permettre de récupérer le texte de celui ci.

De plus il serait peut être plus judicieux de déclarer le name sous forme de "tableau", ici "box[]" afin de faciliter la récupération du(es) choix(s) coté serveur.

exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<script type="text/javascript">
function checkAllBox( obj){
 
  alert( 'value : ' +obj.value +'\nlastChild : ' +obj.parentNode.lastChild.data);
 
  var boxes = document.info.box.length;
  for (i = 0; i < boxes; i++){
    if(!document.info.box[i].checked){
      //alert("Contrôle incomplet !!");
      document.info.box[i].focus();
      return false;
    }
  }
  return true;
}
</script>
</head>
<body>
<form name="info">
  <label><input type="checkbox" name="box[]" value="Nom (1)" onclick="checkAllBox(this)">Nom (1)</label>
  <label><input type="checkbox" name="box[]" value="Nom (2)" onclick="checkAllBox(this)">Nom (2)</label>
  <label><input type="checkbox" name="box[]" value="Nom (3)" onclick="checkAllBox(this)">Nom (3)</label>
</form>
</body>
</html>

**kOrt3x** · 16/04/2011, 09h35

Ok, merci, je vais regarder tous ça.

Merci

name checkbox multiple

JavaScript

Vue hybride

Discussions similaires

Partager

Partager