Discussion :

[zazou123]

Bonjour,

j'ai ce petit code :

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
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 !

[danielhagnoul]

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 HTML :

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

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 JavaScript :

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

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
}

[zazou123]

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 :

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

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 :

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
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

[Robin de L'octet]

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 :

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
 
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;
}

[zazou123]

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 :

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
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

[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.

[danielhagnoul]

Message n° 3, votre code HTML : il existe 3 exemplaires de l'ID casee. Il n'est pas unique !

[NoSmoking]

Bonjour,

... 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 html :

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

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

avec une fonction comme

Code :

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

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.

[zazou123]

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 :

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

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