Discussion :

[Tomawok]

Bonjour,

Je rencontre actuellement un problème que je ne parvient pas à résoudre, je cherche à désélectionner des input type=radio lorsque l'on cache la div dans lequel ils se trouvent (display = 'none').
J'ai crée un système avec des formulaires comportant des types radio, un premier choix me permet d'afficher un autre groupe de radio correspondant au choix. Cependant lorsque je récupère la valeur des radio sélectionnés, je récupère également celle des groupes cachés. Or je souhaiterai seulement récupérer la valeur des radios sélectionnés visiblent.

Mon code html :

Code html :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<ul>
		<li><a href="javascript:switchDivPho('PhotocopieNB');">Photocopie Noir et Blanc</a></li>
		<li><a href="javascript:switchDivPho('PhotocopieC');">Photocopie Couleur</a></li>
	</ul>
        <div id="PhotocopieNB">
	<h2>Photocopie noir et blanc</h2>
		<form method="post" action="Photocopie.php">
		<p>
		Veuillez choisir la taille que vous désirez :<br />
			<input type="radio" name="tailleNB" value="NBA4" id="NBA4" /> <label for="NBA4">  A4</label>
			<input type="radio" name="tailleNB" value="NBA3" id="NBA3" /> <label for="NBA3">  A3</label>
		</p>
		<p>
		Veuillez choisir recto ou recto-verso :<br />
			<input type="radio" name="coteNB" value="recto" id="NBrecto" /> <label for="NBrecto">  Recto</label>
			<input type="radio" name="coteNB" value="recto-verso" id="NBrecto-verso" /> <label for="NBrecto-verso">  Recto-Verso</label>
		</p>
		<p>
		Veuillez choisir le nombre de copie que vous souhaitez :<br />
			<input type="radio" name="nombreNB" value="50" id="NBpack1" /> <label for="NBpack1">  1-49</label>
			<input type="radio" name="nombreNB" value="200" id="NBpack2" /> <label for="NBpack2">  50-199</label>
			<input type="radio" name="nombreNB" value="500" id="NBpack3" /> <label for="NBpack3">  200-499</label>
			<input type="radio" name="nombreNB" value="1000" id="NBpack4" /> <label for="NBpack4">  500-999</label>
			<input type="radio" name="nombreNB" value="1000+" id="NBpack5" /> <label for="NBpack5">  1000 et +</label>
		</p>
		<input type="button" value="Calculer le prix" class="button_calculer" />
		</form>
	</div>
	<div id="PhotocopieC">
		<h2>Photocopie couleur</h2>
		<form method="post" action="Photocopie.php">
		<p>
		Veuillez choisir la taille que vous désirez :<br />
			<input type="radio" name="taille" value="A4" id="A4" /> <label for="A4">  A4</label>
			<input type="radio" name="taille" value="A3" id="A3" /> <label for="A3">  A3</label>
		</p>
		<p>
		Veuillez choisir recto ou recto-verso :<br />
			<input type="radio" name="cote" value="recto" id="recto" /> <label for="recto">  Recto</label>
			<input type="radio" name="cote" value="recto-verso" id="recto-verso" /> <label for="recto-verso">  Recto-Verso</label>
		</p>
		<p>
	        Veuillez choisir le nombre de copie que vous souhaitez :<br />
			<input type="radio" name="nombre" value="50" id="pack1" /> <label for="pack1">  1-49</label>
			<input type="radio" name="nombre" value="200" id="pack2" /> <label for="pack2">  50-199</label>
			<input type="radio" name="nombre" value="500" id="pack3" /> <label for="pack3">  200-499</label>
		        <input type="radio" name="nombre" value="1000" id="pack4" /> <label for="pack4">  500-999</label>
			<input type="radio" name="nombre" value="1000+" id="pack5" /> <label for="pack5">  1000 et +</label>
		</p>
		<input type="button" value="Calculer le prix" class="button_calculer" onClick="calculerPrix();" />
		</form>
	</div>

Mon code javascript pour gérer l'affichage :

Code :

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

1
2
3
4
5
6
7
8
9
function switchDivPho(nom_div){			// Initialisation de la fonction charger une div différente
		if(nom_div == 'PhotocopieNB') {		// Si clic sur Photocopie noir et blanc
			document.getElementById('PhotocopieC').style.display = 'none';				// On cache le reste
			document.getElementById(nom_div).style.display = 'block';					// On affiche le multichoix pour photocopie noir et blanc
		} else if(nom_div == 'PhotocopieC') {						// Si clic sur photocopie couleur
			document.getElementById('PhotocopieNB').style.display = 'none';			// On cache le reste
			document.getElementById(nom_div).style.display = 'block';					// On affiche le multichoix pour photocopie couleur
		}
}

De base, les div sont en display='none'.

Voila mon code jQuery qui me permet de récupérer la valeur des radios sélectionnées :

Code :

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

1
2
3
4
5
6
function calculerPrix(){
	$("input[type='radio']:checked").each(
	  function() {
	   console.log($(this).attr('id'));
	  });          
}

Pour résoudre mon problème j'ai pensé à deux solutions :
_ Au clic du lien de la liste je désélectionne le groupe de radio correspondante, le problème est que si je fais des pages avec énormément de groupe de radio, cela risque d'être vraiment trop long pour désélectionner en fonction de ce que j'affiche.
_ On récupère l'état de la div cacher et on lui retire la sélection, mais dans ce cas là, je ne vois pas la solution au niveau du code.

Merci de votre intérêt.

Mes sincères salutations

Tomawok

[la.lune]

De la même manière que tu as ajouté "NB" dans tous les id des input qui concernent le noir et blanc, ajoute la lettre "C" dans tous les id qui concernent la photocopie en couleur.

Après dans la méthode là que tu caches et tu fais apparaître, fais ceci pour chaque cas :
Premier cas:

Code javascript :

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

1
2
3
 
document.getElementById('PhotocopieC').style.display = 'none';              
$("input[id^=C]").attr('checked', false);

Et ceci aussi pour l'autre cas:

Code :

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

1
2
document.getElementById('PhotocopieNB').style.display = 'none';    
                        $("input[id^=NB]").attr('checked', false);

Très simple ton problème

Mais j'ai vu dans ton code html tu met la méthode dans le href
Tu dois plutôt avoir quelque chose qui ressemble à ça:

Code HTML :

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

1
2
3
 
<li><a href="#" onclick="switchDivPho('PhotocopieNB')" >Photocopie Noir et Blanc</a></li>
        <li><a href="#" onclick="switchDivPho('PhotocopieC')" >Photocopie Couleur</a></li>

[Tomawok]

Bonjour et merci de ta réponse rapide.

Tout d'abord, concernant les hyperliens, j'ai suivi la façon de faire sur un forum (dont je ne me rappel plus le nom) et elle est fonctionnelle. La seule différence est que je n'ai pas le # en fin d'URL. Au début je l'avais écrit de la même façon que tu me l'as conseillé mais je pensais que ça rechargé tout de même la page or il ne faut pas qu'elle se recharge dans mon cas.

Ensuite, la solution que tu me proposes est en effet très simple, j'y avais pensé et je l'ai indiqué dans la première des solutions qui me sont venues à l'esprit. Cependant s'il y a des sous-choix dans des sous-choix qui sont eux même dans des choix, ou encore un sous-choix qui s'affiche en fonction de la sélection de 2 groupes de choix, cela devient tout de suite un peu plus compliqué et on peut vite se perdre dans la correspondance des désélections. De ce fait je me demandais s'il n'était pas possible de récupérer l'état display:none d'une div ou d'un groupe de radio et de lui affecter checked:false ?

Un peu comme ceci (pour essayé de faire comprendre où je veux en venir) :

Code :

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

$("input[type=radio][name=nomDesRadiosCachés]").css('display','none').attr('checked', false);

ou comme ceci ? :

Code :

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

1
2
if('input[type=radio][name=idemQueAuDessus].attr('display') == 'none'){
$(this).attr('checked',false);}

Merci de l'intérêt porté à mon problème et aux solutions apportées.

Mes sincères salutations.

Tomawok

[la.lune]

Pour ce qui est du href ajoute just un return false à la fin de ta méthode, certes ça peut marcher comme ça, mais ce n'est pas sa palce et si tu veux mettre autre chose. le caractère "#" ne veut pas dire que tu as un lien spécifique, non, quand tu clique seul l’événement de clique va se déclencher, et le caractère "#" sera placé en fin de lien dans ta barre du navigateur et ne fera aucun dégât.

Pour ton problème, je ne comprend pas vraiment, mais ce que je viens de faire va cachez tous les éléments dont la classe débute avec la même séquence de mot. Ajoutes les débuts de tes class par catégorie, si tu caches un div, tous ils seront mis à false, comme on fait ici, je ne vois pas où est vraiment le problème. Et ceux qui sont à false le resteront.

[Tomawok]

Merci de tes conseils, j'ai très bien compris ta solution elle m'aide beaucoup.

Ce que j'essayais également d'expliquer c'est que j'aimerais changer la valeur en fonction de l'attribut display et non en fonction du clic. Je vais essayer d'être plus clair : avec la méthode que tu me proposes, on désélectionne en fonction de clic (qui provoque également l'état caché de la div) donc lors du clic sur photocopie NB, on cache la div photocopie C et en même temps on désélectionne tout les input qui sont dans cette div. Ce que je voulais savoir c'est s'il est possible de faire une méthode où, peut importe si l'on clic ou si le changement en display:none se fait automatiquement, on vérifie les éléments en display:none et on leur change l'attribut checked:false.

Si je peux résumé (en grossissant énormément) de la façon suivante :
1ere méthode (que tu me proposes) : SI clic sur PhotocopieC ALORS checked:false pour PhotocpieNB.
2eme methode (que j'ai du mal à expliquer ) : SI éléments = display:none ALORS checked:false pour ces éléments.

Désolée pour les explications un peu bancales mais ne sachant pas s'il existe une solution de ce type et si oui comment elle se code, je ne peux pas donner un aperçu de code autre que ce que j'ai essayé de faire en catastrophe plus haut.

Merci de ton aide qui m'est très utile et me permet de m'améliorer.

Mes sincères salutations.

Tomawok

[la.lune]

Maintenant tu as pu bien expliquer ton problème alors pour réaliser ça c'est très simple que le premier cas:

Code javascript :

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

$("input:hidden").attr('checked', false);

Ce bout de code permet de rendre checked false si un input est caché, que ça soit avec display=='none' ou visibility==false

Même si ce n'est pas toi qui l'a caché ça va marcher