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

[Tomawok]

Merci de ton aide, je comprends comment l'utiliser pour mon site, grâce à toi j'ai réussi à débloqué à ce niveau là encore merci.

Etant donnée que j'ai changé la forme de mes boutons radio en CSS, j'ai caché les boutons d'origine, de ce fait il faut que je trouve une façon de modifié l'image de mes inputs autre que celle-ci :

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
input[type="radio"]:not(:checked),input[type="radio"]:checked{display:none;}
input[type="radio"]+label
{
	display:block;
	margin:5px;/* c'est plus aéré avec une marge !*/
}
input[type="radio"]+label:before
{
	content:"";/* pour que le bouton soit visible*/
	display:inline-block;
	width:0.7em;
	height:0.7em;
	background-color:#d8dadb;
	border:2px solid #0066e0;
	border-radius:55px;
}
input[type="radio"]+label:hover:before /*Bouton hover*/
{
	background-color:#0066e0;
}
input[type="radio"]:checked+label:before/*Bouton coché*/
{
	background-color:#00e0b2;
}
input[type="radio"]:disabled+label:before/*Bouton désactivé*/
{
	background-color:#999;
	border:2px solid #333;
}

Encore une fois merci de ton aide, je dois maintenant chercher comment modifier l'affichage de mes radios sans mettre l'affichage d'origine en display:none.
Je considère mon problème résolu et je me rapprocherais de la section css si j'ai besoin d'aide.

Une très bonne fin de journée.

Mes sincères salutations et remerciements.

Tomawok

[Tomawok]

J'ai tout de même une dernière question, est-il possible d'utiliser le code que tu m'as donné :

Code :

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

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

mais avec des label, comme ça par exemple :

Code :

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

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

Merci de ton aide.

Mes sincères salutations.

Tomawok

[la.lune]

Comment mettre un checked à false sur un label?
Tu peux faire n'importe quel comportement propre sur un label une fois caché mais pas un état de checked
Par exemple

Code :

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

$("label:hidden").css("color","red");

[Tomawok]

Donc si je veux que la désélection se fasse automatiquement, j'effectue un setInterval comme ça toutes les 0,5 secondes par exemple je désélectionne les inputs dont les labels sont caché.

J'essaye ceci comme code :

Code :

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

1
2
3
4
5
setInterval(function(){
		if($('label:hidden')){
			$(this).$('input').attr('checked', false);
		}
	},500);

Je ne pense pas que utiliser le chaînage de cette façon soit correct car cela ne fonctionne pas.

Cordialement.

Tomawok

[Tomawok]

J'ai essayé ceci :

Code :

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

1
2
3
4
5
setInterval(function(){
		if($('label:hidden')){
			$('label:hidden ~ input').attr('checked', false);
		}
	},500);

Et ça m'a l'air de fonctionner, n'hésitez pas à me reprendre si la façon de l'écrire n'est pas bonne.
Merci pour toute votre aide apportée.

Cordialement.

Tomawok

[la.lune]

Je ne comprend pas bien ton code, comment tu ne te focalises sur chaque élément et se liaison

J'ai essayé ceci :

Code :

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

1
2
3
4
5
setInterval(function(){
        if($('label:hidden')){
            $('label:hidden ~ input').attr('checked', false);
        }
    },500);

Quand tu faislabel:hidden ~ input tu dis tout simplement pour chaque label caché sélectionner tous les input suivant et qui ont commun un parent unique, du coup pour chaque label il sélection la suite entier, il peut dépasser vers d'autres input s'ils ont ont un parent commun.

Or pour des input de type radio un label est placé après et non pas avant le bouton radio correspondant.

Mais quel est le lien entre tes labels en classes ou ids? Et comment tu fais pour reafficher?
Bon si j'ai bien compris en partie ton but, on peut faire que seul un input avant un label caché soit mis checked à false, et ça se propage pour tous les cas en même temps.

Alors en supposant que chaque bouton radio est mis avant un label, il y a pas d’élément au milieu même si la bonne solution c'est de regroupe les deux dans un div ou p mais on peut faire ceci

Code :

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

1
2
3
4
setInterval(function(){
            $('label:hidden').prev().attr('checked', false);
        }
    },500);

[Tomawok]

Merci de ton aide apportée.
En effet, mon but est de rendre false le checked de tous les inputs qui sont juste avant le label correspondant. Comme dans l'exemple de mon tout premier poste, j'utilise un id dans le input afin de relier le label avec un for correspondant.

Je ne comprend pas pourquoi mon code qui ciblé à l'envers de ce que je voulais fonctionné du coup. J'ai corrigé avec le dernier code que tu m'as passé et tout se passe comme il faut.

Un grand merci à toi

Mes sincères salutations.

Tomawok