1 pièce(s) jointe(s)
Détecter lorsqu'un input radio est décoché.
Bonjour à tous
Je sais qu'il est facile de détecter lorsqu'un 'input radio' est coché.
Par contre, est-il possible de détecter lorsqu'il est automatiquement décoché par un autre 'input radio'
Voilà mon problème: j'ai une page HTML composée de 10 manoeuvres identiques dans lesquelles il y a des choix sélectionnables par des 'input radio' (volet, relais central, relais distant)
Pièce jointe 655221
Lorsque qu'on sélectionne 'volet' il faut que les autres options soient grisées ainsi que n° relais disparaisse.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| let listeRadioVolet = document.querySelectorAll(".volet");
listeRadioVolet.forEach(function(v){
v.addEventListener("change",function(s){
volet = s.target.innerHTML;
let p = this.parentElement.id;
if(this.checked){
document.querySelector("#" + p + " .local_relais").style.color='grey';
document.querySelector("#" + p + " .distant_relais").style.color='grey';
document.querySelector("#" + p + " .n_relais").style.visibility='hidden';
}
else{
??????????????
}
})
}) |
Mais si on change d'avis et que l'on sélectionne relais central par exemple, il faut rétablir l'ordre initial et griser le choix volet.
Au lien de réécrire des 'Event' pour chaque 'input radio' il suffirait de détecter que le radio volet est décoché.
Est-ce possible?
Pourquoi tant de haine envers le CSS
Citation:
Envoyé par mormic
Cela fonctionne bien; les deux radio relais sont passés verts. Maintenant il faudrait que j'intègre ce style dans mon prog Javascript.
Mais pourquoi vouloir passer par du JavaScript alors que dans le code CSS que je t’ai fourni il suffisait de remplacer
Code:
1
2
3
| [type="radio"]:checked +label{
color: inherit;
} |
par
Code:
1
2
3
| [type="radio"]:checked +label{
color: #0C0;
} |
Citation:
Envoyé par mormic
sachant que cette page est soit saisie par le client, soit téléchargée par le serveur à la demande du client pour modification.
Il faut dans ce cas avoir un formulaire correct, il faut mettre un name aux éléments, et distinct pour faciliter la récupération côté serveur, pour que ceux-ci puissent être transmis.
Il faut regrouper ce qui va ensemble et ordonner cela par manœuvre :
- Volet -> Fermeture/Ouverture
- Relais -> Central/Distant
Après il est vrai que tu as une façon particulière de gérer la transmission de données, vu dans une de tes discussions.
Citation:
Envoyé par mormic
Est-il possible lorsqu'un relais est sélectionné que le nom de l'élément 'Taux' devienne 'Délai' car dans le cas d'un relais on peut sélectionner un délai d'activation?
Oui, de la même façon que tu affiches/caches le numéro de relais ou presque, on peut masquer un élément particulier.
Attention ces deux champs ne semblent pas être du même type.
Un contrôle ne devrait pas avoir plusieurs usages.
Mais il te faut d'abord finaliser correctement tes contrôles, avoir un diagramme de liaisons solide, sans cela même le JavaScript peut se retrouver bancal !
Ma contribution CSS
Le HTML, name, ID et value surement à ajuster :
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
53
54
55
56
57
58
59
60
61
62
| <fieldset>
<legend>Manoeuvre 0</legend>
<p>
<label>
<input type="text" name="EQU_1" value="0" maxlength="1" size="1" pattern="[0-9A-F]">
Adresse de l'équipement
</label>
</p>
<p>
<input type="radio" class="volet" id="VO_1" name="MAN_1" value="VO_1">
<label for="VO_1">Volet</label>
<input type="radio" id="RC_1" name="MAN_1" value="RC_1">
<label for="RC_1">Relais Central</label>
<input type="radio" id="RD_1" name="MAN_1" value="RD_1">
<label for="RD_1">Relais Distant</label>
<label class="num-relais">N° du relais
<input name="NR_1" type="text">
</label>
<span class="new-ligne"></span>
<input id="F_1" type="radio" name="ACT_1" value="F">
<label for="F_1">Fermeture</label>
<input id="O_1" type="radio" name="ACT_1" value="O">
<label for="O_1">Ouverture</label>
<label class="taux-delai"><span>Délai</span><span>Taux</span> <!-- modif. inversé -->
<input type="number" name="D_1" value="00" min="00" max="99">
</label>
<label>Heure
<input type="time" name="H_1" value="00:00">
</label>
</p>
</fieldset>
<fieldset>
<legend>Manoeuvre 1</legend>
<p>
<label>
<input type="text" name="EQU_2" value="0" maxlength="1" size="1" pattern="[0-9A-F]">
Adresse de l'équipement
</label>
</p>
<p>
<input type="radio" class="volet" id="VO_2" name="MAN_2" value="VO_2">
<label for="VO_2">Volet</label>
<input type="radio" id="RC_2" name="MAN_2" value="RC_2">
<label for="RC_2">Relais Central</label>
<input type="radio" id="RD_2" name="MAN_2" value="RD_2">
<label for="RD_2">Relais Distant</label>
<label class="num-relais">N° du relais
<input name="NR_2" type="text">
</label>
<span class="new-ligne"></span>
<input id="F_2" type="radio" name="ACT_2" value="F">
<label for="F_2">Fermeture</label>
<input id="O_2" type="radio" name="ACT_2" value="O">
<label for="O_2">Ouverture</label>
<label class="taux-delai"><span>Délai</span><span>Taux</span> <!-- modif. inversé -->
<input type="number" name="D_2" value="00" min="00" max="99">
</label>
<label>Heure
<input type="time" name="H_2" value="00:00">
</label>
</p>
</fieldset> |
et le CSS qui est a appliquer :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| .new-ligne {display: block;margin: 1em 0;}
legend {padding: 0 .5em;font-weight: 700;}
fieldset [type="radio"] + label {
color: #CCC;
}
fieldset [type="radio"]:checked + label {
color: #0C0;
}
/* sélecteur en passant par une classe */
.volet:checked ~ label.num-relais {
display: none;
}
.volet ~ label.taux-delai :nth-child(2) {
display: none;
}
.volet:checked ~ label.taux-delai :nth-child(1) {
display: none;
}
.volet:checked ~ label.taux-delai :nth-child(2) {
display: initial;
} |
et c'est tout ;)
