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