Javascript / Jquery Gérer la sélection d'un input radio en fonction de son display
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:
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:
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:
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
