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

15/04/2011, 18h43	#3
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 806 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 806 Points : 35 803 Points : 35 803	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)" /> __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

16/04/2011, 09h35	#6
kOrt3x Rédacteur/Modérateur Aurélien Gaymay Technicien Informatique/Etudiant Web Inscription : septembre 2006 Messages : 2 320 Détails du profil Informations personnelles : Nom : Aurélien Gaymay Âge : 29 Localisation : France, Nord (Nord Pas de Calais) Informations professionnelles : Activité : Technicien Informatique/Etudiant Web Secteur : Santé Informations forums : Inscription : septembre 2006 Messages : 2 320 Points : 7 272 Points : 7 272	Ok, merci, je vais regarder tous ça. Merci __________________ QuickEvent : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) QuickEvent Lite : Prise de rendez-vous rapide pour iPhone/iPad et iPod Touch (AppStore) ______________________________________________________________________________________ La rubrique Mac - Les cours & tutoriels Mac - Critiques de Livres Mac
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email