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 : 235
Taille : 54,8 Ko

Nom : PageHTML.JPG
Affichages : 235
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.

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

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

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

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager