Détecter lorsqu'un input radio est décoché.

**mormic** · 27/05/2024, 14h09

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)
Nom : PageHTML.JPG
Affichages : 137
Taille : 54,8 Ko

Nom : PageHTML.JPG
Affichages : 137
Taille : 54,8 Ko

Lorsque qu'on sélectionne 'volet' il faut que les autres options soient grisées ainsi que n° relais disparaisse.

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
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?

**gabi7756** · 27/05/2024, 14h55

Bonjour
Tu peux utiliser l'événement change sur un conteneur parent qui encapsule tous les boutons radio, puis vérifier quel bouton a été modifié.
Du style comme ca

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
<div class="manoeuvre">
        <input type="radio" id="volet1" name="manoeuvre1" value="volet">
        <label for="volet1">Volet</label>
 
        <input type="radio" id="relais-central1" name="manoeuvre1" value="relais-central">
        <label for="relais-central1">Relais Central</label>
 
        <input type="radio" id="relais-distant1" name="manoeuvre1" value="relais-distant">
        <label for="relais-distant1">Relais Distant</label>
    </div>
  <div class="manoeuvre">
        <input type="radio" id="volet2" name="manoeuvre2" value="volet">
        <label for="volet2">Volet</label>
 
        <input type="radio" id="relais-central2" name="manoeuvre2" value="relais-central">
        <label for="relais-central2">Relais Central</label>
 
        <input type="radio" id="relais-distant2" name="manoeuvre2" value="relais-distant">
        <label for="relais-distant2">Relais Distant</label>
    </div>
etc etc

Et le js :

Code :

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

 const manoeuvres = document.querySelectorAll('.manoeuvre');

Tu fais un fort sur tout tes conteneurs manoeuvres et tu ajoutes un écouteur d'évenement 'change'
Lorsqu'il se déclenche tu vérifies si ton radio 'volet' est coché (isChecked=true je crois) et tu grises le reste , et l'inverse est vrai , lorsqu'il n'est pas coché tu laisses accessible le reste des boutons ou autres trucs

Bon courage et hésite pas

J'espère avoir répondu à ton interrogation , parce que j'ai pas trop compris l'énoncé pour être honnête
En conclusion si tu as qu'une seule action qui modifie les autres options sélectionnable bah tu fais toutes tes modifications en fonctions de si ton radio est coché ou non.

**ASCIIDEFOND** · 27/05/2024, 16h45

Salut mormic,

Lorsque qu'on sélectionne 'volet' il faut que les autres options soient grisées ainsi que n° relais disparaisse.

Une fois que la sélection est faite et que les autres options sont grisées, tu ne pourras plus changer d'option avec des inputs type="radio".

Un exemple.

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    input[type=number] {
        width: 35px;
        margin-right: 20px;
    }
 
    .violet {
        margin-right: 20px;
    }
 
    .invisible {
        visibility: hidden;
    }
</style>
 
<body>
 
    <div class="div-a">
        <p>Manoeuvre 0</p>
        <label class="labelnumber">Adresse de l'équipement<input type="number" value="0"></label>
        <label class="labelcheckbox">Volet<input type="radio" class="violet"></label>
        <label class="labelcheckbox">Relais central<input type="radio" class="violet"></label>
        <label class="labelcheckbox">Relais distant<input type="radio" class="violet" checked></label>
        <label class="labelnumber">N° du relais<input type="number" value="0"></label><br />
        <label class="labelcheckbox">Fermeture<input type="radio" class="violet"></label>
        <label class="labelcheckbox">Ouverture<input type="radio" class="violet"></label>
    </div>
    <br />
 
    <div class="div-b">
        <p>Manoeuvre 1</p>
        <label class="labelnumber">Adresse de l'équipement<input type="number" value="0"></label>
        <label class="labelcheckbox">Volet<input type="radio" class="violet"></label>
        <label class="labelcheckbox">Relais central<input type="radio" class="violet"></label>
        <label class="labelcheckbox">Relais distant<input type="radio" class="violet" checked></label>
        <label class="labelnumber">N° du relais<input type="number" value="0"></label><br />
        <label class="labelcheckbox">Fermeture<input type="radio" class="violet"></label>
        <label class="labelcheckbox">Ouverture<input type="radio" class="violet"></label>
    </div>
 
    <script>
 
        for (const labelSelect of document.querySelectorAll('.labelcheckbox')) {
            labelSelect.querySelector('input').addEventListener('change', (e) => {
                let parentDiv = labelSelect.closest('div');
                switchAll(parentDiv, e.target);
            })
        }
 
        function switchAll(divParent, checkElement) {
            for (const checkboxObject of divParent.querySelectorAll('.labelcheckbox')) {
                let labelParent = checkElement.closest('label'),
                    parentElement = divParent.querySelectorAll('input');
 
                if (checkboxObject.querySelector('input') != checkElement) {
                    checkboxObject.querySelector('input').checked = false;
                }
 
                labelParent.innerText == "Volet" ? parentElement[4].parentElement.classList.add('invisible') : parentElement[4].parentElement.classList.remove('invisible')
            }
        }
 
 
        //RAZ des input radio
        for (const labelSelect of document.querySelectorAll('.labelcheckbox')) {
            labelSelect.children[0].checked = false
        }
 
    </script>
</body>
 
</html>

**NoSmoking** · 27/05/2024, 16h53

Bonjour,

Envoyé par gabi7756

Tu peux utiliser l'événement change sur un conteneur parent

attention cela ne marche pas avec n'importe quel conteneur, un <form> de préférence.

Envoyé par ASCIIDEFOND

Une fois que la sélection est faite et que les autres options sont grisées, tu ne pourras plus changer d'option avec des inputs type="radio".

attention ils sont grisés mais pas disabled !

De plus sur des <input type="radio" class="violet"> il faut leur affecter un name pour que l'on puisse les soumettre et pour qu'ils soient liés au cochage/décochage.

Envoyé par mormic

Lorsque qu'on sélectionne 'volet' il faut que les autres options soient grisées ainsi que n° relais disparaisse.

Attendu que c'est de la pure présentation, tu peux réaliser cela en CSS avec la bonne structure HTML.

Exemple, en partant de quelque chose comme :

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
<p>
  <input type="radio" 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>N° du relais<input name="NR_1" type="text"></label>
</p>
<p>
  <input type="radio" 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>N° du relais<input name="NR_2" type="text"></label>
</p>

et en appliquant ces règles CSS :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
[type="radio"] + label{
  color: #CCC;
}
[type="radio"] + label + label{
  display: none;
}
[type="radio"]:checked +label{
  color: inherit;
}
[type="radio"]:checked + label + label{
  display: initial;
}

tu ne devrais pas être loin de ce que tu souhaites.

**mormic** · 27/05/2024, 17h07

Merci pour toutes ces réponses.
A force de chercher à faire quelque chose de simple, je m'aperçois que l'aspect des input radio n'est pas modifiable nativement. Il faut passer par des manips bien trop compliquées pour moi. Alors je vais m'en tenir à l'aspect tristounet des input radio de base.
Désolé d'avoir usé de votre temps.

**ASCIIDEFOND** · 27/05/2024, 17h12

Salut NoSmoking,

attention ils sont grisés mais pas disabled !

Oui effectivement. Un élément de sélection qui est grisé est en général un élément non disponible. Mais bon

**NoSmoking** · 27/05/2024, 17h22

je m'aperçois que l'aspect des input radio n'est pas modifiable nativement.

Si si, impératrice, le CSS te permet de faire presque ce que tu veux !

Par exemple : Radio Button CSS style Examples, mais il y en a plein d'autres notamment sur CodePen, entre autres.

**mormic** · 28/05/2024, 10h03

J'ai suivi les conseils de NoSmoking au #4 et j'arrive à modifier la couleur par exemple, en ajoutant un style.
Mon HTML pour la manoeuvre 0:

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
        <h3>Manoeuvre 0</h3>
        <div id="m0">
            <input type="text" class="equipe_add" value="0" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add">Adresse de l'équipement</label>
            <input type="radio" class="volet" name="equip0" value="V"/>
            <label for="volet">Volet</label>
            <input type="radio" class="local_relais relais" name="equip0" value="B"/>
            <label for="local_relais">Relais central</label>
            <input type="radio" class="distant_relais relais" name="equip0" value="D"/>            
            <label for="distant_relais">Relais distant --</label>
            <label for="n_relais">N° du relais</label>
            <input type="number" class="n_relais" value="0" maxlength="1" size="1" min="1" max="8"/>
        </div>
        <div id="action0">
            <input type="radio" name="acte0" value="F" class="ferme"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" name="acte0" value="O" class="ouvre"/>
            <label for="ouvre">Ouverture --</label>
            <label for="taux">Taux</label>
            <input type="number" class="taux" value="00" maxlength="2" size="2" min="00" max="99"/>
            <label for="hr">-- Heure</label>
            <input type="time" value="00:00" class="hr"/>
        </div>

Le style CSS pour la class relais par exemple (notez qu'il y a deux radio avec la class relais):

Code css :

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

1
2
3
#m0 [type="radio"].relais + label{
    color: green;
}

Cela fonctionne bien; les deux radio relais sont passés verts.

Maintenant il faudrait que j'intègre ce style dans mon prog Javascript.
Pour faire un essai j'ai fait ceci:

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
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 + " [type='radio'].relais + label").style.color='green';
           document.querySelector("#" + p + " [type='number'].n_relais + label").style.color ='blue';
        }
    })
})
let listeRadioRelais = document.querySelectorAll(".relais");
listeRadioRelais.forEach(function(r){
    r.addEventListener("change",function(t){
        relais = t.target.innerHTML;
        let p = this.parentElement.id;
        if(this.checked){
           document.querySelector("#" + p + " [type='radio'].relais + label").style.color='red';
           document.querySelector("#" + p + " [type='radio'].volet + label").style.color='yellow';
        }
    })
})

Si je check volet, seulement le premier relais devient vert et j'ai l'impression que ça se plante car plus rien ne réagit.
Si vous voyez la faille?

**gabi7756** · 28/05/2024, 10h21

Si du js plante alors regarde la console, y a sûrement un message d'erreur qui devrait t'aider

Code :

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

1
2
3
4
5
6
7
8
9
10
let listeRadioRelais = document.querySelectorAll(".relais");
listeRadioRelais.forEach(function(r){
    r.addEventListener("change",function(t){
        relais = t.target.innerHTML;
        let p = this.parentElement.id;
        if(this.checked){
           document.querySelector("#" + p + " [type='radio'].relais + label").color='red';
           document.querySelector("#" + p + " [type='radio'].volet + label").color='yellow';
        }
    })

Remplace .color par .style.color

**mormic** · 28/05/2024, 10h52

Remplace .color par .style.color

Oui je me suis aperçu de l'erreur et j'ai corrigé mais le problème est toujours identique sans message d'erreur dans la console Chrome.
En fait ce n'est pas planté car je peux continuer à cliquer sur les boutons radio.
Pour résumer ce nouveau problème:
si j'écris le style en CSS les deux radio 'relais' passe au vert alors que si j'écris la commande javascript, le premier uniquement passe au vert.
************
En plus je n'arrive pas à modifier la couleur de n_relais.
*************
J'ai trouvé une solution pour ce dernier point, je remplace le label par un span:

Code html :

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

1
2
3
            <!--<label for="n_relais">N° du relais</label>-->
            <span class="no">N° du relais</span>
            <input type="number" class="n_relais" value="0" maxlength="1" size="1" min="1" max="8"/>

Puis en JS:

Code :

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

document.querySelector("#" + p + " .no").style.color ='lightgrey';

***********************
Est-il possible avec queryselector de modifier le texte d'un élément? par exemple dans

Code html :

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

<span class="no">N° du relais</span>

mettre

Code html :

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

<span class="no">Validation</span>

?

**ASCIIDEFOND** · 29/05/2024, 04h46

Envoyé par mormic

J'ai trouvé une solution pour ce dernier point, je remplace le label par un span:...

Inutile je pense car le problème rencontré doit se situer au niveau du code CSS.

Si j'ai bien compris, tu souhaites colorer l'input type="radio" sélectionné et griser les autres et si ce dernier a une class="volet", le label "N° du relais" et son input disparaissent.

J'ai repris ton code HTML légèrement modifié et en utilisant des noms de class pour gérer les couleurs via le CSS.

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
 
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
 
        <style>
                /* Mise en forme pour l'exemple */
                div, h3, label {
                        user-select: none;
                }
 
                input:not([type="radio"]) {
                        width: 35px;
                        margin: 0 10px;
                }
 
                input[type="time"] {
                        width: max-content;
                }
 
                input[type="radio"] {
                        margin: 0 5px;
                }
 
                label {
                        margin-right: 10px;
                }
 
                /* Gestion des couleurs des labels contenants un input type="radio" et de l'effacement du label "N° du relais" */
                .gray {
                        color: #ccc;
                }
 
                .green {
                        color: green;
                }
 
                .invisible {
                        visibility: hidden;
                }
        </style>
 
</head>
 
<body>
        <h3>Manoeuvre 0</h3>
        <div class="m0">
                <label><input type="text" class="equipe_add" value="0" maxlength="1" size="1"
                                pattern="[0-9A-F]" />Adresse
                        de l'équipement</label>
                <label class="gray">Volet<input type="radio" name="equip0" class="volet" value="V"></label>
                <label class="gray">Relais central<input type="radio" name="equip0" class="local_relais relais"
                                value="B" /></label>
                <label class="gray">Relais distant<input type="radio" name="equip0" class="distant_relais relais"
                                value="D" /></label>
                <label>N° du relais<input type="number" class="n_relais" value="0" maxlength="1" size="1" min="1"
                                max="8" /></label><br />
        </div>
        <div class="action0">
                <label class="gray"><input type="radio" name="acte0" value="F" class="ferme" />Fermeture</label>
                <label class="gray"><input type="radio" name="acte0" value="O" class="ouvre" />Ouverture --</label>
                <label>Taux<input type="number" class="taux" value="00" maxlength="2" size="2" min="00"
                                max="99" /></label>
                <label>-- Heurex<input type="time" value="00:00" class="hr" /></label>
        </div>
 
        <h3>Manoeuvre 1</h3>
        <div class="m1">
                <label><input type="text" class="equipe_add" value="0" maxlength="1" size="1"
                                pattern="[0-9A-F]" />Adresse
                        de l'équipement</label>
                <label class="gray">Volet<input type="radio" name="equip1" class="volet" value="V"></label>
                <label class="gray">Relais central<input type="radio" name="equip1" class="local_relais relais"
                                value="B" /></label>
                <label class="gray">Relais distant<input type="radio" name="equip1" class="distant_relais relais"
                                value="D" /></label>
                <label>N° du relais<input type="number" class="n_relais" value="0" maxlength="1" size="1" min="1"
                                max="8" /></label><br />
        </div>
        <div class="action0">
                <label class="gray"><input type="radio" name="acte1" value="F" class="ferme" />Fermeture</label>
                <label class="gray"><input type="radio" name="acte1" value="O" class="ouvre" />Ouverture --</label>
                <label>Taux<input type="number" class="taux" value="00" maxlength="2" size="2" min="00"
                                max="99" /></label>
                <label>-- Heurex<input type="time" value="00:00" class="hr" /></label>
        </div>
 
        <script>
 
                document.querySelectorAll("input[type='radio']").forEach(function (v) {
                        v.checked = false; // L'ensemble des inputs type="radio" de la page sont unchecked (refresh page)
 
                        v.addEventListener("change", function (s) {
                                let divParent = v.closest('div'); // On récupère le parent div 
 
                                for (let x = 0; x < divParent.querySelectorAll("input[type='radio']").length; x += 1) { //On boucle seulement les inputs type="radio" de divParent      
                                        divParent.querySelectorAll("input[type='radio']")[x].parentElement.classList.remove('green'); // On supprime la class="green" sur les inputs type="radio"
                                }
 
                                if (this.checked) {
                                        this.parentElement.classList.add('green'); // Ajout de la class="green" au label parent de l'input type="radio"
 
                                        if (this.classList.contains('volet')) { // Si input class="volet"
                                                divParent.querySelector('.n_relais').parentElement.classList.add('invisible'); // On ajoute la class="invisible" au label parent de l'input class="n_relais"
                                        } else if (divParent.querySelector('.n_relais') != null) { //Seulement si la div parent contient un input class="n-relais"
                                                divParent.querySelector('.n_relais').parentElement.classList.remove('invisible'); // Si oui, on supprime la class="invisible" du label parent
                                        }
                                }
 
                        })
 
                })
 
        </script>
</body>
 
</html>

**mormic** · 29/05/2024, 15h50

Merci ASCIIDEFOND cela fait exactement ce dont j'avais besoin.
Il me faut digérer ce que tu appelles "légère modification" ! et l'intégrer dans mon projet, sachant que cette page est soit saisie par le client, soit téléchargée par le serveur à la demande du client pour modification.

J'avais une question subsidiaire, sachant que

Si si, impératrice, le CSS te permet de faire presque ce que tu veux !
(NoSmoking 27/05/2024)

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?

**gabi7756** · 29/05/2024, 16h51

En css je sais pas mais en js oui ,

Tu ajoutes ca dans le if dans le js

Code :

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

1
2
3
4
5
6
7
8
9
10
 if (this.checked) {
                                        this.parentElement.classList.add('green'); // Ajout de la class="green" au label parent de l'input type="radio"                 
 
                                        let numero=this.name.substring(this.name.length - 1,this.name.length)
                                        if (this.className=="local_relais relais" || this.className=="distant_relais relais" ){
                                        		document.querySelector('label[for="taux' + numero + '"]').textContent="Délai"
                                        }
                                        else{ 
                                        document.querySelector('label[for="taux' + numero + '"]').textContent="Taux"
                                        }

Et pour le côté html j'ai ajouté le for dans le label, et un id='taux0'

Code html :

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

 <label for='taux0'>Taux<input type="number" id="taux0" class="taux" value="00" maxlength="2" size="2" min="00" max="99" /></label>

Pas besoin de toucher au css

**ASCIIDEFOND** · 29/05/2024, 17h48

Salut Gabi7756,

L'idée est bonne mais malheureusement elle ne fonctionnera pas ici, car les balises inputs sont placées dans les balises labels et si on modifie le texte avec un innertext ou un innerHTML, la balise input disparaîtra.

Une solution en copiant la balise input puis modifier le texte du label et pour finir replacer l'input dans sa balise label.

Code javascript :

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
...
        if (this.checked) {
          this.parentElement.classList.add("green"); // Ajout de la class="green" au label parent de l'input type="radio"
 
          if (this.classList.contains("volet")) {// Si input class="volet"
            divParent.querySelector(".n_relais").parentElement.classList.add("invisible"); // On ajoute la class="invisible" au label parent de l'input class="n_relais"
 
            // On récupère les deux éléments (label et input) pour modifier le texte du label en "Taux" ou "Délai"
             let tmpinput = divParent.nextElementSibling.querySelector(".taux"),// L'input class="taux"
             tmplabel = tmpinput.parentElement; // Le label de l'input ci-dessus
 
            tmplabel.innerText = 'Taux'; // label texte "Taux"
            tmplabel.appendChild(tmpinput); // On insère dans le label l'input class="taux"
 
 
          } else if (divParent.querySelector(".n_relais") != null) {//Seulement si la div parent contient un input class="n-relais"
            divParent.querySelector(".n_relais").parentElement.classList.remove("invisible"); // Si oui, on supprime la class="invisible" du label parent
 
            let tmpinput = divParent.nextElementSibling.querySelector(".taux"),// L'input class="taux"
             tmplabel = tmpinput.parentElement; // Le label de l'input ci-dessus
 
            tmplabel.innerText = 'Délai'; // label texte "Délai"
            tmplabel.appendChild(tmpinput);
 
          }
        }
...

**gabi7756** · 30/05/2024, 08h22

Bah en faites j'ai testé sur un éditeur en ligne , et ca fonctionne bel et bien donc bizarre ce que tu me dis :p

**NoSmoking** · 30/05/2024, 09h49

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 css :

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

1
2
3
[type="radio"]:checked +label{
  color: inherit;
}

par

Code css :

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

1
2
3
[type="radio"]:checked +label{
  color: #0C0;
}

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.

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 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
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 css :

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
.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

**mormic** · 30/05/2024, 11h45

Chers contributeurs
Toutes vos solutions fonctionnent et montrent que vous maîtrisez parfaitement le sujet.
Pour ma part, je dois avouez que j'ai un peu de mal à assimiler toutes les subtilités des langages utilisés.
Sachant que j'apprends énormément avec vos conseils mais que je ne veux pas me contenter de faire du copier-coller, j'ai tout de même essayé de comprendre pourquoi ma solution initiale ne fonctionnait pas. Alors j'ai fini par trouver ma grossière erreur: il ne fallait pas que je scinde les manoeuvres en deux div avec id différents.
Ce qui donne pour 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
        <h3>Manoeuvre 0</h3>
        <div id="m0">
            <input type="text" class="equipe_add" value="0" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add">Adresse de l'équipement</label>
            <input type="radio" class="volet" name="equip0" value="V"/>
            <label for="volet">Volet</label>
            <input type="radio" class="relais local_relais" name="equip0" value="B"/>
            <span class="rl">Relais central</span>
            <input type="radio" class="relais distant_relais" name="equip0" value="D"/>       
            <span class="rd">Relais distant ...</span>
            <span class="no">N° du relais</span>
            <input type="number" class="n_relais" value="0" maxlength="1" size="1" min="1" max="8"/>
            <br>
            <input type="radio" class="action ferme" name="acte0" value="F"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" class="action ouvre" name="acte0" value="O"/>
            <label for="ouvre">Ouverture ...</label>
            <span class="tx">Taux</span>
            <input type="number" class="taux" value="00" maxlength="2" size="2" min="00" max="99"/></label>
            <label for="hr">... Heure</label>
            <input type="time" class="hr" value="00:00"/>
        </div>
        <h3>Manoeuvre 1</h3>
        <div id="m1">
            <input type="text" class="equipe_add" value="0" maxlength="1" size="1" pattern="[0-9A-F]"/>
            <label for="equipe_add">Adresse de l'équipement</label>
            <input type="radio" class="volet" name="equip1" value="V"/>
            <label for="volet">Volet</label>
            <input type="radio" class="relais local_relais" name="equip1" value="B"/>
            <span class="rl">Relais central</span>
            <input type="radio" class="relais distant_relais" name="equip1" value="D"/>
            <span class="rd">Relais distant ...</span>
            <span class="no">N° du relais</span>
            <input type="number" class="n_relais" value="0" maxlength="1" size="1" min="1" max="8"/>
            <br>
            <input type="radio" class="action ferme" name="acte1" value="F"/>
            <label for="ferme">Fermeture</label>
            <input type="radio" class="action ouvre" name="acte1" value="O"/>
            <label for="ouvre">Ouverture ...</label>
            <span class="tx">Taux</span>
            <input type="number" class="taux" value="00" maxlength="2" size="2" min="00" max="99"/>
            <label for="hr">... Heure</label>
            <input type="time" class="hr" value="00:00"/>
        </div>
        <h3>Manoeuvre 2</h3>
        <div id="m2"> <!--............ jusqu'à m9 -->

et pour le JS:

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
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
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){       //si un radio volet est sélectionné
           document.querySelector("#" + p + " [type='radio'].volet + label").style.color='red'; 
           document.querySelector("#" + p + " .rl").style.color ='lightgrey';
           document.querySelector("#" + p + " .rd").style.color ='lightgrey';
           document.querySelector("#" + p + " .no").style.color ='lightgrey';
           document.querySelector("#" + p + " .n_relais").style.visibility='hidden';
           document.querySelector("#" + p + " .tx").textContent = "... Taux";
        }
    })
})
let listeRadioRelais = document.querySelectorAll(".relais");
listeRadioRelais.forEach(function(r){
    r.addEventListener("change",function(t){
        relais = t.target.innerHTML;
        let p = this.parentElement.id;
        let v = this.value;
        if(this.checked){       //si un radio relais est sélectionné
            document.querySelector("#" + p + " [type='radio'].volet + label").style.color='lightgrey';                        
            document.querySelector("#" + p + " .no").style.color ='red';
            document.querySelector("#" + p + " .n_relais").style.visibility='visible';
            document.querySelector("#" + p + " .tx").textContent = '... Delai';
            if(v=='B'){         //relais Base
               document.querySelector("#" + p + " .rl").style.color ='red';
               document.querySelector("#" + p + " .rd").style.color ='lightgrey';
            }
            else if(v=='D'){    //relais Distant
               document.querySelector("#" + p + " .rd").style.color ='red';
               document.querySelector("#" + p + " .rl").style.color ='lightgrey';
            }
        }
    })
})
let listeRadioAction = document.querySelectorAll(".action");
listeRadioAction.forEach(function(a){
    a.addEventListener("change",function(b){
        action = b.target.innerHTML;
        let p = this.parentElement.id;
        let v = this.value;
        if(this.checked && v=='O'){       //si un radio Ouverture est sélectionné
            document.querySelector("#" + p + " [type='radio'].ferme + label").style.color = 'lightgrey';
            document.querySelector("#" + p + " [type='radio'].ouvre + label").style.color = 'red';
        }
        else {
            document.querySelector("#" + p + " [type='radio'].ferme + label").style.color = 'red';
            document.querySelector("#" + p + " [type='radio'].ouvre + label").style.color = 'lightgrey';
 
        }
    })
})

Ce code d'amateur est assurément moins optimisé que les votres mais cela fonctionne aussi.

De toute façon, je vous remercie pour le temps que vous avez consacré et pour la transmission de votre savoir car vous n'êtes pas avare en communication.

Mon projet n'est pas encore terminé, et j'aurai sûrement encore besoin de coups de pouce.
Bien cordialement
Michel

**NoSmoking** · 31/05/2024, 10h37

Le match est inégal, CSS 18 lignes - JS 54 lignes

Je t'engage quand même à passer ton code HTML au validateur, par exemple : https://validator.w3.org/nu/#textarea, un code valide facilite la tâche !

**mormic** · 31/05/2024, 16h50

Le match est inégal, CSS 18 lignes - JS 54 lignes

Je suis parfaitement convaincu par tes arguments mais mon problème est la maîtrise du CSS, pas toujours intuitive, pour moi qui vient du Visual Basic. Dès que j'aurai finalisé ce projet, je te promets que je m'y pencherai plus sérieusement.
Sinon le lien pour checker le HTML est super. Lorsque je l'ai lancé la première fois, ouha!
C'était impressionnant. Aussi j'ai pratiquement tout corrigé sans que cela n'altère le rendu d'origine. Heureusement me diras-tu. Il reste une bricole que je ne comprends pas:
Nom : Capture.JPG
Affichages : 21
Taille : 17,2 Ko

Nom : Capture.JPG
Affichages : 21
Taille : 17,2 Ko

J'ai beau chercher dans mes bouquins et sur le Net ?

Code :

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

1
2
3
4
5
6
    <HEAD>
        <title>Domotique Mormic - Programmation horaire</title>
        <meta charset="utf-8">
        <link href="styleProg.css" rel="stylesheet" type="text/css">    
        <script src="codeProg.js" defer></script>  
    </HEAD>

Si tu as une idée.
Encore merci pour ta précieuse aide.

Détecter lorsqu'un input radio est décoché.

JavaScript

Discussions similaires

Partager

Partager