[POO] Groupe exclusif de cases à cocher

Version imprimable

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:

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>

09/03/2009, 12h30
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 ?
09/03/2009, 12h32
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.

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:

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.

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

Code:

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

Merci pour le JS Général03 :D

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:

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

Citation:

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:

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

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

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

Citation:
Envoyé par Général03
Dans ce cas utilise plutot le script suivant :
Code:

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

09/03/2009, 14h10
alice.b

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

Citation:
Envoyé par alice.b
Ok je crois avoir un début de solution ^^
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 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.

Citation:

Envoyé par alice.b

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

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

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

09/03/2009, 14h35
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 ...
09/03/2009, 14h50
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...

Citation:

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:

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:

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

etc pour les autres en mettant l'ID correspondant

Citation:

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

09/03/2009, 15h14
Poulpynette

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

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

Code:

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

09/03/2009, 16h04
Poulpynette

Bien :D

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

Tu vas t'arracher les cheveux si tu codes avec Notepad ^^
09/03/2009, 16h11
alice.b

Citation:

Envoyé par Poulpynette

Bien :D

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