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

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

[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