Discussion :

[alice.b]

Bonjour,

Mon problème concerne les cases à cocher. Je souhaite que l'on puisse soit cocher des personnes (cases à cocher) soit qu'on puisse sélectionner un groupe parmi 3 (bouton radio). Voici le code que j'ai mais malheureusement tel qu'il est écrit on peut cocher des personnes et choisir un groupe ...

Code :

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

1
2
3
4
5
6
7
8
9
10
<form action="index.php">
<input type= "checkbox" name="personne" value="nom"> Prenom Nom<br>
<input type= "checkbox" name="personne" value="nom1"> Prenom1 Nom1<br>
<input type= "checkbox" name="personne" value="nom2"> Prenom2 Nom2<br>
<input type= "checkbox" name="personne" value="nom3"> Prenom3 Nom3<br>
 
<input type= "radio" name="groupe" value="groupe1"> groupe 1<br>
<input type= "radio" name="groupe" value="groupe2"> groupe 2<br>
<input type= "radio" name="groupe" value="groupe3"> groupe 3<br>
</form>

[Général03]

C'est normal d'avoir le fonctionnement que tu décris car tu affiches tes balises sans conditions. Il faut que tu passes par javascript et que tu affiches soit tes cases à cocher soit tes radio en fonction d'un évènement. Joue sur le visibilité des tes objets.
D'ailleurs qu'est ce qui conditionne ton choix ?

[alice.b]

Justement c'est le probleme, c'est l'utilisateur qui choisit. Il faut que s'il coche des cases il ne puisse pas sélectionner de radio et vice versa.

[Poulpynette]

Une solution consiste à mettre un identifiant sur tes balises de type "input" : un identifiant pour les checkboxes, un autre identifiant pour les boutons radio.

Par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
<form action="index.php">
<input type= "checkbox" name="personne" value="nom" id="check"> Prenom Nom<br>
<input type= "checkbox" name="personne" value="nom1" id="check"> Prenom1 Nom1<br>
<input type= "checkbox" name="personne" value="nom2" id="check"> Prenom2 Nom2<br>
<input type= "checkbox" name="personne" value="nom3" id="check"> Prenom3 Nom3<br>
 
<input type= "radio" name="groupe" value="groupe1" id="radio"> groupe 1<br>
<input type= "radio" name="groupe" value="groupe2" id="radio"> groupe 2<br>
<input type= "radio" name="groupe" value="groupe3" id="radio"> groupe 3<br>
</form>

Tu implémentes ensuite une petite fonction javascript qui réagit sur les événements de clic et active ou désactive tes "input", en fonction de cet identifiant.

[Général03]

Selon le code de Poulpynette tu peux essayer ce script JS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
if (document.getElementById('check').checked)
{
document.getElementById('check').style.visibility ="visible";
document.getElementById('radio').style.visibility ="hidden";
}
else
{
document.getElementById('check').style.visibility ="hidden";
document.getElementById('radio').style.visibility ="visible";
}

[Poulpynette]

Merci pour le JS Général03

Si je puis me permettre, je n'utiliserais pas "hidden" et "visible", car une fois mis à "hidden", on ne peut plus changer d'avis ...

J'opterais plutôt pour la propriété "disabled", qui se contente de désactiver (griser) les "input" :

Code :

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

1
2
3
4
5
6
7
8
9
10
if (document.getElementById('check').checked)
{
document.getElementById('check').disabled ="";
document.getElementById('radio').disabled ="disabled";
}
else
{
document.getElementById('check').disabled ="disabled";
document.getElementById('radio').disabled ="";
}

Edit : pardon je suis idiote, une fois grisé, le problème persiste ... Je sors ...

[Général03]

J'opterais plutôt pour la propriété "disabled", qui se contente de désactiver (griser) les "input" :

Dans ce cas utilise plutot le script suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
if (document.getElementById('check').checked)
{
document.getElementById('check').disabled = true;
document.getElementById('radio').disabled = false;
}
else
{
document.getElementById('check').disabled = false;
document.getElementById('radio').disabled = true;
}

[alice.b]

Ok je crois avoir un début de solution ^^

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
 
<form action="">
   <input type="checkbox" name="personne" value="nom" onClick="verificateurRadio(this.form.groupe)">Prenom Nom<br>
   <input type="checkbox" name="personne" value="nom1" onClick="verificateurRadio(this.form.groupe)">Prenom1 Nom1<br>
   <input type="checkbox" name="personne" value="nom2" onClick="verificateurRadio(this.form.groupe)">Prenom2 Nom2<br>
   <input type="radio" name="groupe" value="BC" onClick="verificateurCheckBox(this.form.personne)">grp1<br>
   <input type="radio" name="groupe" value="nonBC" onClick="verificateurCheckBox(this.form.personne)">grp2<br>
   <input type="radio" name="groupe" value="nom" onClick="verificateurCheckBox(this.form.personne)">tous<br>
   </form>
   <SCRIPT language ="javascript">
		function verificateurRadio(radio){
 
			for (var i=0; i<radio.length;i++){
				if (radio[i].checked){
					alert("Vous avez déjà sélectionné un groupe, vous ne pouvez pas séléctionner de personnes")
				}
			}
 
		}
		function verificateurCheckBox(checkbox){
 
			for (var i=0; i<checkbox.length;i++){
				if (checkbox[i].checked){
					alert("Vous avez déjà sélectionné une personne, vous ne pouvez pas séléctionner de groupe")	
				}
			}
 
		}
	</SCRIPT>

Sauf que maintenant j'aimerai, déselectionner la checkbox ou le radio qui fait conflit...Est-ce que c'est possible avec du javascript??

[Poulpynette]

Dans ce cas utilise plutot le script suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
if (document.getElementById('check').checked)
{
document.getElementById('check').disabled = true;
document.getElementById('radio').disabled = false;
}
else
{
document.getElementById('check').disabled = false;
document.getElementById('radio').disabled = true;
}

Aussi oui !

Mais j'y pense, remettre à false ne sert à rien puisque pour le moment, c'est irréversible une fois désactivé (true).

[alice.b]

OULA j'ai un train de retard ...je regarde les solutions et je reviens ^^

[Poulpynette]

Ok je crois avoir un début de solution ^^

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
 
<form action="">
   <input type="checkbox" name="personne" value="nom" onClick="verificateurRadio(this.form.groupe)">Prenom Nom<br>
   <input type="checkbox" name="personne" value="nom1" onClick="verificateurRadio(this.form.groupe)">Prenom1 Nom1<br>
   <input type="checkbox" name="personne" value="nom2" onClick="verificateurRadio(this.form.groupe)">Prenom2 Nom2<br>
   <input type="radio" name="groupe" value="BC" onClick="verificateurCheckBox(this.form.personne)">grp1<br>
   <input type="radio" name="groupe" value="nonBC" onClick="verificateurCheckBox(this.form.personne)">grp2<br>
   <input type="radio" name="groupe" value="nom" onClick="verificateurCheckBox(this.form.personne)">tous<br>
   </form>
   <SCRIPT language ="javascript">
		function verificateurRadio(radio){
 
			for (var i=0; i<radio.length;i++){
				if (radio[i].checked){
					alert("Vous avez déjà sélectionné un groupe, vous ne pouvez pas séléctionner de personnes")
				}
			}
 
		}
		function verificateurCheckBox(checkbox){
 
			for (var i=0; i<checkbox.length;i++){
				if (checkbox[i].checked){
					alert("Vous avez déjà sélectionné une personne, vous ne pouvez pas séléctionner de groupe")	
				}
			}
 
		}
	</SCRIPT>

C'est un début mais là c'est juste un message qui détecte ce qui a été coché. Sans les identifiants sur tes balises "input", tu ne pourras construire ton javascript proprement.

Et puis je trouve dommage de boucler sur tous tes "input" pour détecter celui qui a été coché, c'est un peu lourd.

Sauf que maintenant j'aimerai, déselectionner la checkbox ou le radio qui fait conflit...Est-ce que c'est possible avec du javascript??

Oui c'est possible, on t'a mis sur la piste un peu plus haut

[alice.b]

Alors ya un début mais ça fonctionne pas tout à fait
Voici mon code modifié avec vos idées:

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
<form action="">
   <input type="checkbox" name="check" id="check" value="nom" onClick="verificateurSelection()">Prenom Nom<br>
   <input type="checkbox" name="check" id="check" value="nom1"  onClick="verificateurSelection()">Prenom1 Nom1<br>
   <input type="checkbox" name="check" id="check"value="nom2" onClick="verificateurSelection()">Prenom2 Nom2<br>
   <input type="radio" name="radio" id="radio"  value="grp1" onClick="verificateurSelection()">grp1<br>
   <input type="radio" name="radio" id="radio" value="grp2"  onClick="verificateurSelection()">grp2<br>
   <input type="radio" name="radio" id="radio" value="grp3"  onClick="verificateurSelection()">grp3<br>
   </form>
 
  <SCRIPT language ="javascript">
	function verificateurSelection(){
		if (document.getElementById('check').checked)
		{
			document.getElementById('check').disabled = true;
			document.getElementById('radio').disabled = false;
		}
		else
		{
			document.getElementById('check').disabled = false;
			document.getElementById('radio').disabled = true;
		}
}
 
	</SCRIPT>

Le probleme c'est qu'il ne se passe pas du tout ce que je voulais... quand je coche un radio ça me désactive une checkboxe et non toutes et quand je coche un radio il se passe rien...

[Poulpynette]

Erf, j'avoue ne pas avoir testé le code avant de te donner cette idée ...

Dès que j'ai un moment je teste et je te tiens au courant.

Edit : effectivement le même "id" répété plusieurs fois a l'air de poser problème ...

[alice.b]

d'acc. Je pense que le problème c'est que getElementById ne fait pas de boucle...enfin je sais pas exactement ce que ça fait mais comme il n'y a que le permier radio qui se grise quelque soit la case que je coche...

[Général03]

il n'y a que le permier radio qui se grise quelque soit la case que je coche...

En faite chaque balise <input> doit avoir un "id" unique tu doit avoir en html

Code :

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

1
2
3
4
5
6
7
8
9
 
<input type= "checkbox" name="personne" value="nom" id="1"> Prenom Nom<br>
<input type= "checkbox" name="personne" value="nom1" id="2"> Prenom1 Nom1<br>
<input type= "checkbox" name="personne" value="nom2" id="3"> Prenom2 Nom2<br>
<input type= "checkbox" name="personne" value="nom3" id="4"> Prenom3 Nom3<br>
 
<input type= "radio" name="groupe" value="groupe1" id="g1"> groupe 1<br>
<input type= "radio" name="groupe" value="groupe2" id="g2"> groupe 2<br>
<input type= "radio" name="groupe" value="groupe3" id="g3"> groupe 3<br>

donc en javascript (pour le 1er checkbox) tu auras

Code :

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

document.getElementById('1').disabled = true;

etc pour les autres en mettant l'ID correspondant

c'est que getElementById ne fait pas de boucle...enfin je sais pas exactement ce que ça fait

cette fonction permet de sélectionner ton objet par son ID qui est un identifiant unique. Après tu peux lui spécifier des attributs (c'est se que l'on fait avec "disabled")

[Poulpynette]

Désolée, c'est moi qui ai fait erreur dès le départ en mettant des identifiants identiques sur les "input".

[alice.b]

ça y est!!! j'ai trouvé!
J'ai un peu été retardée à cause d'un parenthèsage malheureux (merci nodepad++ ) mais bon voici finalement ce que je voulais faire:

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
<form action="">
   <input type="checkbox" name="check" value="nom" onClick="verificateurR(this.form.groupe)">Prenom Nom<br>
   <input type="checkbox" name="check" value="nom1" onClick="verificateurR(this.form.groupe)">Prenom1 Nom1<br>
   <input type="checkbox" name="check" value="nom2" onClick="verificateurR(this.form.groupe)">Prenom2 Nom2<br>
   <input type="radio" name="groupe" value="grp1" onClick="verificateurC(this.form.check)">grp1<br>
   <input type="radio" name="groupe" value="grp2" onClick="verificateurC(this.form.check)">grp2<br>
   <input type="radio" name="groupe" value="grp3" onClick="verificateurC(this.form.check)">grp3<br>
   </form>
 
  <SCRIPT language ="javascript">
	function verificateurR(radio){	
		for (var i=0; i<radio.length; i++){
				document.getElementsByName("groupe")[i].disabled=true;
		}
	}
	function verificateurC(checkbox){
		for(var i=0; i<checkbox.length;i++){
				document.getElementsByName("check")[i].disabled=true;
		}
	}
 
	</SCRIPT>

ok c'est un peu lourd mais ça fonctionne.
Je vais intégrer ça dans un menu déroulant (fait en flash) alors ça va etre galère , peut etre meme impossible mais bon je vais tenter!

[Poulpynette]

Bien

Si je peux te conseiller un bon éditeur, c'est PSPad.

Tu vas t'arracher les cheveux si tu codes avec Notepad ^^

[alice.b]

Bien

Si je peux te conseiller un bon éditeur, c'est PSPad.

Tu vas t'arracher les cheveux si tu codes avec Notepad ^^

Merci je vais tester ça ^^.