Synchroniser deux toggle

**Spip17** · 25/09/2018, 10h50

Bonjour,

Je cherche à synchroniser deux boutons switch toggle c'est à dire que lorsque je clique sur l'un des switchs, ce-dernier glisse et je souhaite que l'autre aussi et inversement.

Merci d'avance pour votre aide.

**NoSmoking** · 25/09/2018, 10h57

Bonjour,
c'est quoi des boutons « switch toggle » ?

Tu peux utiliser cette structure HTML

Code HTML :

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

1
2
<input type="radio" name="choix" value="1">
<input type="radio" name="choix" value="2">

il faut simplement que les deux <input> aient le même name, après le CSS peut faire le reste.

Invité · 25/09/2018, 12h21

Bonjour,

Même question :

Envoyé par NoSmoking

c'est quoi des boutons «switch toggle» ?

Ce sont des checkbox ?
Stylisés en "switch" ? (comme ici, ou ici avec JS ?)

S'ils n'ont pas le même name ou fonction, il faut voir du coté de JavaScript.

Mais on attend que tu montres ton code (HTML, JS ?)...

N.B. La réponse à ta question se trouve certainement dans le 2ème lien que j'ai donné ! (à adapter, bien sûr)

**Spip17** · 27/09/2018, 08h56

Bonjour,

Je vous remercie pour votre aide.

J'utilisais des switch en m'inspirant de https://codepen.io/nickbottomley/pen/uhfmn.
Et j'ai rajouté un attribut "onclick" et la fonction de synchronisation des deux switchs via le deuxième lien envoyé et ça marche très bien.

Est-ce que vous souhaitez que je dépose le code dans cette discussion?

Merci d'avance pour votre retour.

Invité · 27/09/2018, 09h03

Bonjour,

Envoyé par Spip17

...Est-ce que vous souhaitez que je dépose le code dans cette discussion?...

Oui, car ça intéressera certainement d'autres.

C'est le principe d'un forum d'entraide.

**Spip17** · 28/09/2018, 08h34

Alors, voici comment j'ai fait:

Pour contextualiser, j'ai deux switch sur la même page web et ici, vous avez le code pour l'un des deux switchs:

L'objectif était de faire apparaître 2 tableaux gérés par deux switch et que l'état de ces switch se synchronisent:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<body>
 
    <div class="switch switchButton">
      <input id="radio-a" type="radio" name="switchF" onclick="sync_toggle('radio-d','radio-c', 'radio-b', 'radio-a', 1)" checked="checked"/>
      <label for="radio-a">M</label>
 
      <input id="radio-b" type="radio" onclick="sync_toggle('radio-d','radio-c', 'radio-b', 'radio-a', 2)" name="switchF"/>
      <label for="radio-b">A</label><span class="toggle-outside"><span class="toggle-inside"></span></span>
    </div>
 
 
</body>

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
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
*,
*:before,
*:after {
  box-sizing: border-box;
}
 
 
.switch {
  margin: 4rem auto;
}
/* main styles */
.switch {
  width: 24rem;
  position: relative;
}
.switch input {
  position: absolute;
  top: 0;
  z-index: 2;
  opacity: 0;
  cursor: pointer;
}
.switch input:checked {
  z-index: 1;
}
.switch input:checked + label {
  opacity: 1;
  cursor: default;
}
.switch input:not(:checked) + label:hover {
  opacity: 0.5;
}
.switch label {
  color: #23c1aa;
  opacity: 0.33;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.switch .toggle-outside {
  height: 70%;
  border-radius: 2rem;
  padding: 0.25rem;
  overflow: hidden;
  transition: 0.25s ease all;
}
.switch .toggle-inside {
  border-radius: 5rem;
  background: #fff;
  position: absolute;
  transition: 0.25s ease all;
}
.switchButton {
  width: 24rem;
  height: 3rem;
  margin: 0 auto;
  font-size: 0;
}
.switchButton input {
  height: 3rem;
  width: 6rem;
  left: 10.5rem;
  margin: 0rem;
}
.switchButton label {
  font-size: 1.5rem;
  line-height: 3rem;
  display: inline-block;
  width: 6rem;
  height: 100%;
  margin: 0;
  text-align: center;
  font-family: 'Roboto', sans-serif !important;
}
.switchButton label:last-of-type {
  margin-left: 6rem;
}
.switchButton label:first-of-type {
  margin-right: 6rem;
}
.switchButton .toggle-outside {
  background: #23c1aa;
  position: absolute;
  width: 5rem;
  left: 10.5rem;
  top: 0.5rem;
}
.switchButton .toggle-inside {
  height: 1.5rem;
  width: 1.5rem;
}
.switchButton input:checked ~ .toggle-outside .toggle-inside {
  left: 0.25rem;
}
.switchButton input ~ input:checked ~ .toggle-outside .toggle-inside {
  left: 3.25rem;
}

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
28
29
30
31
32
33
34
35
 
function sync_toggle(id1,id2,id3,id4, idT) 
{     
	var toggle1 = document.getElementById(id1);   
	var toggle2 = document.getElementById(id2);
        var toggle3 = document.getElementById(id3); 
        var toggle4 = document.getElementById(id4);       
	var is_checked1 = toggle1.checked;   
	var is_checked2 = toggle2.checked;
	var is_checked3 = toggle4.checked;
	var is_checked4 = toggle4.checked;
 
	if (is_checked1 == is_checked3)
	{
 
        toggle1.checked = !is_checked1;      
	toggle2.checked = !is_checked2;
 
    }
	var idTableau = idT;
if(idTableau==1)
	{
		document.getElementById('Id_Tableau1').style.display='contents'
		document.getElementById('Id_Tableau2').style.display='none';
		document.getElementById('Id_Tableau3').style.display='contents'
		document.getElementById('Id_Tableau4').style.display='none';
	}
	else
	{
		document.getElementById('Id_Tableau1').style.display='none';
		document.getElementById('Id_Tableau2').style.display='contents';
		document.getElementById('Id_Tableau3').style.display='none';
		document.getElementById('Id_Tableau4').style.display='contents';
	}
 }

Synchroniser deux toggle

JavaScript

Discussions similaires

Partager

Partager