Sélection éléments dans boucle for

Version imprimable

Bonjour,

j'ai ce petit code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function verifcheck() { var inputs = document.getElementsByClassName('lacaseh'); var nb_checkbox = document.querySelectorAll('.lacaseh').length; for (var i = 0; i <= nb_checkbox; i++) { if (inputs[i].value === "1") { alert('vous avez coché qqchose !'); return false; } else { alert ('vous avez rien coché!'); return false; } } }
Normalement, dès lors que la valeur de l'input qui a pour class "lacaseh" est égal à 1 alors je devrais avoir le message "vous avez coché qqchose".
Ce code fonctionne uniquement si je sélectionne ma première checkbox mais si je sélectionne la seconde, il m'affiche toujours "vous avez rien coché"....
J'ai remplacé nb_checkbox par un chiffre et j'obtiens le même résultat.

J'ai mal fait ma boucle for ? Faut que j'utilise autre chose que la boucle for ?

Merci pour vos pistes !

:salut:

Sans le code HTML, au vu de votre code JS, j'en suis réduit à supposer que la classe "lacaseh" est utilisée par des tags input de type indéterminé et des tags input de type "checkbox".

Dans vos sélecteurs CSS, il faut donc distinguer les deux.

Code:

1
2
3
4
5
6
7
8
<input class="lacaseh" type="text">
<input class="lacaseh" type="text">
<input class="lacaseh" type="text">
 
<input class="lacaseh" type="checkbox">
<input class="lacaseh" type="checkbox">
<input class="lacaseh" type="checkbox">
<input class="lacaseh" type="checkbox">

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const
  textInputs = document.querySelectorAll( "input[type='text'].lacaseh" ),
  checkboxInputs = document.querySelectorAll( "input[type='checkbox'].lacaseh" );
 
for ( const text of Array.from( textInputs ) ){
  console.log( text );
 
  // votre code sur l'élément input text
}
 
for ( const chbox of Array.from( checkboxInputs ) ){
  console.log( chbox );
 
  // votre code sur l'élément input checkbox
}

Bonjour et merci pour cette réponse.

Le code HTML possède des INPUTS checkbox avec une classe qui se nomme "lacase" et des INPUT de type hidden dont la classe se nomme "lacaseh".
C'est cette dernière qui prend la valeur 0 ou 1.
Je simplifie les choses pour ne pas rentrer dans les détails de trop. Ce qui m'intéresse c'est que quelque soit la case cochée j'aimerai, la valeur de l'input qui a pour class "lacaseh" est égal à 1 et je devrais donc avoir le message "vous avez coché qqchose".

Un bout du code hmtl :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form onsubmit="return verifcheck()" name="formulaire_page1" method="post" action="page2.php" enctype="multipart/form-data">
	<table>
		<tbody>
		<tr><td><label for="ah" id="casee" class="couleurv1">	
					<input type="checkbox" class="lacase" id="ah" name="ah" data-position="0"  data-id="#f2f2f2"/> 
					<input type="hidden" class="lacaseh" id="ah_hidden" name="ah_hidden" value="0" />
 
				<span>ah/ah là là</span></label></td><td><label for="cocorico" id="casee" class="couleurv1">	
					<input type="checkbox" class="lacase" id="cocorico" name="cocorico" data-position="0"  data-id="#f2f2f2"/> 
					<input type="hidden" class="lacaseh" id="cocorico_hidden" name="cocorico_hidden" value="0" />
 
				<span>cocorico</span></label></td><td><label for="hop" id="casee" class="couleurv1">	
					<input type="checkbox" class="lacase" id="hop" name="hop" data-position="0"  data-id="#f2f2f2"/> 
					<input type="hidden" class="lacaseh" id="hop_hidden" name="hop_hidden" value="0" />

Lorsque je fais ce code :

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
function verifcheck() {
 
  var inputs = document.getElementsByClassName('lacaseh');
 
 
  for (var i = 0; i <= document.querySelectorAll('.lacaseh').length; i++) {
 
    if (inputs[0].value === "1") { 
      alert('vous avez coché qqchose !');
      return false;
    }
 
    else if (inputs[1].value === "1") { 
      alert('vous avez coché la case 2 !');
      return false;
    }
 
	else {
		alert ('vous avez rien coché!');
		return false;
	}
 
  } 
 
 
}

Cela fonctionne évidemment. J'aimerai donc pouvoir comprendre comment faire fonctionner cette boucle...

Merci pour votre aide

Bonjour,

Le problème doit venir du 'return false;' -> cela te fais sortir de ta fonction, donc tu ne testes que le premier élément dans ta boucle for.
Essaies en le plaçant après ta boucle for, comme cela :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function verifcheck() { var inputs = document.getElementsByClassName('lacaseh'); var nb_checkbox = document.querySelectorAll('.lacaseh').length; for (var i = 0; i <= nb_checkbox; i++) { if (inputs[i].value === "1") { alert('vous avez coché qqchose !'); return false; } } alert ('vous avez rien coché!'); return false; }

Merci, effectivement maintenant cela marche un peu mieux.
Cela étant, si je ne coche rien du tout, alors je n'ai pas de message et cela passe à la page suivante.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function verifcheck() { var inputs = document.getElementsByClassName('lacaseh'); var nb_checkbox = document.querySelectorAll('.lacaseh').length; for (var i = 0; i <= nb_checkbox; i++) { if (inputs[i].value === "1") { alert('vous avez coché qqchose !'); return false; } } alert ('vous avez rien coché!'); return false; }
Sinon, après réflexion, je me dis que je peux simplifier le problème car jai donc :
- une liste de checkbox variable (parfois j'ai 18 checkbox, parfois 14 etc.) qui ont tous un input hidden ac une classe "lacaseh" associé pour des raisons qu'on n'a pas besoin d'expliquer
- a la fin de cette liste de checkbox j'ai une case "aucun".

Donc en gros je voudrais pouvoir faire :
1. si l'utilisateur coche parmi la liste au moins une réponse => alors on passe à la page suivante
2. si l'utilisateur coche "aucun" => alors on passe à la page suivante
3. si l'utilisateur ne coche rien du tout => alors on affiche un message
4. si l'utilisateur coche parmi la liste au moins une réponse puis coche ensuite "aucun" => le choix dans la liste se décoche.

Merci :)

07/07/2017, 17h10
Robin de L'octet

Normalement si tu coches rien il devrait y avoir le 2eme message, il y a un problème d'indice dans la boucle, essaies : (var i = 0; i < nb_checkbox; i++)

Pour les autres points il faudrait être plus spécifique sur ce qui pose problème exactement.
07/07/2017, 19h28
danielhagnoul

Message n° 3, votre code HTML : il existe 3 exemplaires de l'ID casee. Il n'est pas unique !
08/07/2017, 07h43
NoSmoking
Bonjour,

Citation:

Envoyé par danielhagnoul

... il existe 3 exemplaires de l'ID casee. Il n'est pas unique !

qui en plus ne servent à rien !

Pourquoi ne pas faire un simple appel

Code:

<form onsubmit="return verifcheck(this)" ...>

avec une fonction comme
Code:

1 2 3 4 5 6 function verifcheck(form) { var oElems = form.querySelectorAll(':checked'); var nbChecked = oElems.length; alert(nbChecked); return nbChecked ? true : false; }
à adapter bien sûr.

Ok pour l'ID : je n'ai qu'une seule ligne puisque les données sont générées par ma BDD donc je ne l'ai pas vu en effet, merci.

Poru le reste, j'ai essayé de m'inspirer de vos réponses et fait :
Code:

1 2 3 4 5 6 7 8 9 10 11 function verifcheck(form) { if ((document.getElementsByClassName('lacaseh')[0].value == 0) && (!document.getElementById('aucun').checked)) { alert ('il faut cocher qqchose'); return false; } else return true ; }
Cela fonctionne pour la première case donc, logique. Ensuite j'ai essayé d'intégrer une boucle, mais c'est là ou je bloque ....
Merci