Décochage checkbox Javascript

**none61** · 14/09/2018, 12h50

Bonjour tout le monde,

Je viens aujourd'hui vers vous car je n'arrive pas a faire fonctionner un petit script JS servant a décocher une checkbox.

J'ai essayé en javascript mais aussi en JQuery mais rien n'y fait...

Voici ou j'en suis.

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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
 
</head>
 
<body>
 
 
<!-- Declaration de la checkbox -->
<input id="test" type="checkbox" name="checkbox1" class="js-switch" checked />
 
<!-- declaration du bouton pour checker -->
<button onclick="myFunction()">Decheck Me</button>
 
 
 
<script>
function myFunction() {
alert("ok");
document.getElementByClassName("js-switch").checked=false;
alert("ok2");
  }
</script>

Merci a vous

**feelwatt** · 14/09/2018, 13h27

Salut,
je ferais comme ca, sans js.

Code HTML :

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

1
2
3
4
<input type="checkbox" id="la_check" name="">
 <label for="la_check">
 	Cocher/decocher
 </label>

**none61** · 14/09/2018, 13h38

Salut Feelwat, merci pour ta réponse,

Je suis obligé de passer par du Javascript car mes checkboxs seront activées ou désactivé via le parsage d'un .xml

Merci

**feelwatt** · 14/09/2018, 14h06

Ben là,
à part un getelementbyid('xxx')=true; je peux pas dire.
Pas assez calé.
A+

**eleydet** · 14/09/2018, 14h14

Bonjour,
Une solution...

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
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
 
</head>
 
<body>
 
<!-- Declaration de la checkbox -->
<input id="test" type="checkbox" name="checkbox1" class="js-switch" checked />
 
<!-- declaration du bouton pour checker -->
<button onclick="myFunction()">Decheck Me</button>
 
<script>
function myFunction() {
  alert("ok");
  document.getElementsByClassName("js-switch")[0].checked=false;
  alert("ok2");
}
</script>
 
</body>
</html>

**none61** · 14/09/2018, 18h24

Salut Eleydet,

Merci pour ta réponse

En effet ça fonctionne !!

J'avais aussi essayé avec la className mais sans succès car je ne mettais pas le [0]

Serais tu par hasard a quoi il sert?

Invité · 14/09/2018, 19h12

Bonjour,

Envoyé par none61

...Serais tu par hasard a quoi il sert?...

Je ne "serais", pas mais je "saurais" sûrement...

Il faut être CURIEUX, PENSER à faire une RECHERCHE et LIRE la DOC : document.getElementsByClassName

"Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les noms de classe donnés."

Explication :

une classe peut être appliquée à PLUSIEURS éléments (contrairement à un id, qui est UNIQUE).
getElementsByClassName : va récupérer TOUS les éléments de cette classe. (même si, comme dans ton cas, il n'y en a qu'un seul)
le [0] sélectionne le 1er élément

CELA DIT : Je ne vois pas l'intérêt d'un bouton "Decheck Me" (et d'une fonction JS), ALORS qu'il suffit de CLIQUER sur la checkbox !
Il y a quelque chose qui m'échappe...

Si la checkbox est cochée, on écrit :

Code :

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

<input id="test" type="checkbox" name="checkbox1" class="js-switch" checked="checked " />

Si la checkbox est décochée, on écrit :

Code :

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

<input id="test" type="checkbox" name="checkbox1" class="js-switch" />

Où est la difficulté ??

**none61** · 14/09/2018, 21h00

Bonjour jreaux62, merci pour ta réponse et désolé pour la faute.......

Concernant le bouton "DecheckMe" , il n'est là que pour faire les test...Et en effet il n'est pas compliqué de faire de simple checkbox...

Pourquoi donc les piloter avec Javascript?

Car ma page html me servira a piloter les éléments connectés de ma maison, et que si par exemple j'allume une lumière avec un vrai bouton, il faut que la page reste synchronisée ...(passage du fichier .xml d'un IPX800 afin de mettre a jour la page)

Après ce n'est surement pas la meilleur solution (quoique....) mais c'est en tout cas la seul que je sais faire...

Concernant ma demande pour cela, il y a une chose toute bête qui m'est arrivé.

Explication:

Mes checkbox(s) sont modifiées en apparence afin d'apparaitre sous forme de switch. => https://github.com/abpetkov/switchery Ce qui donne une apparence cool et simple a modifier

Mais...car il y a un mais, lorsque j'utilise le script pour les piloter, et bien, cela ne fonctionne pas... ni par className, ni avec l'Id..

Voila voila...

Invité · 15/09/2018, 11h29

OK, vu.

1- Je te propose d'ABANDONNER "switchery".
En effet, au lieu d'ajouter/supprimer dynamiquement des classes (facilement manipulable), il écrit du CSS en ligne (non modifiable * sans cliquer sur la checkbox elle-même).
* (en tout cas, je n'ai pas trouvé comment faire... même en consultant la doc...)

2- J'ai trouvé du code FULL CSS qui fait le job : https://codepen.io/jreaux62/pen/QVBoJM
Il te suffit de copier-coller le code CSS, et de modifier le HTML en conséquence.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<h1>iOS Switches with Labels</h1>
<div class="switches">
  <input type="checkbox" name="checkbox1" id="checkbox1" class="ios-toggle" checked/>
  <label for="checkbox1" class="checkbox-label" data-off="off" data-on="on"></label>
 
  <input type="checkbox" name="checkbox1" id="checkbox2" class="ios-toggle" checked/>
  <label for="checkbox2" class="checkbox-label" data-off="no" data-on="yes"></label>
 
  <input type="checkbox" name="checkbox1" id="checkbox3" class="ios-toggle" checked/>
  <label for="checkbox3" class="checkbox-label" data-off="this is a longer label off" data-on="this is a longer label on"></label>
</div>

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
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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0;
/*transition*/
-webkit-transition:.25s ease-in-out;
   -moz-transition:.25s ease-in-out;
     -o-transition:.25s ease-in-out;
        transition:.25s ease-in-out;
outline:none;
font-family:Helvetica Neue,helvetica,arial,verdana,sans-serif;
}
body{
background:#f1f1f1;
}
h1{
margin:75px auto 0 auto;
text-align:center;
font-weight:200;
color:#4b4b4b;
}
.switches{
width:60px;
margin:50px auto;
text-align:center;
}
.ios-toggle,.ios-toggle:active{
position:absolute;
top:-5000px;
height:0;
width:0;
opacity:0;
border:none;
outline:none;
}
.checkbox-label{
display:block;
position:relative;
padding:10px;
margin-bottom:20px;
font-size:12px;
line-height:16px;
width:100%;
height:36px;
/*border-radius*/
-webkit-border-radius:18px;
   -moz-border-radius:18px;
        border-radius:18px;
background:#f8f8f8;
cursor:pointer;
}
.checkbox-label:before{
content:'';
display:block;
position:absolute;
z-index:1;
line-height:34px;
text-indent:40px;
height:36px;
width:36px;
/*border-radius*/
-webkit-border-radius:100%;
   -moz-border-radius:100%;
        border-radius:100%;
top:0px;
left:0px;
right:auto;
background:white;
/*box-shadow*/
-webkit-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
   -moz-box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
        box-shadow:0 3px 3px rgba(0,0,0,.2),0 0 0 2px #dddddd;
}
.checkbox-label:after{
content:attr(data-off);
display:block;
position:absolute;
z-index:0;
top:0;
left:-300px;
padding:10px;
height:100%;
width:300px;
text-align:right;
color:#bfbfbf;
white-space:nowrap;
}
.ios-toggle:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
   -moz-box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
        box-shadow:inset 0 0 0 20px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
.ios-toggle:checked + .checkbox-label:before{
left:calc(100% - 36px);
/*box-shadow*/
-webkit-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
   -moz-box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
        box-shadow:0 0 0 2px transparent,0 3px 3px rgba(0,0,0,.3);
}
.ios-toggle:checked + .checkbox-label:after{
content:attr(data-on);
left:60px;
width:36px;
}
/* GREEN CHECKBOX */
 
#checkbox1 + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
   -moz-box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
        box-shadow:inset 0 0 0 0px rgba(19,191,17,1),0 0 0 2px #dddddd;
}
#checkbox1:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
   -moz-box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
        box-shadow:inset 0 0 0 18px rgba(19,191,17,1),0 0 0 2px rgba(19,191,17,1);
}
#checkbox1:checked + .checkbox-label:after{
color:rgba(19,191,17,1);
}
/* RED CHECKBOX */
 
#checkbox2 + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
   -moz-box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
        box-shadow:inset 0 0 0 0px #f35f42,0 0 0 2px #dddddd;
}
#checkbox2:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
   -moz-box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
        box-shadow:inset 0 0 0 20px #f35f42,0 0 0 2px #f35f42;
}
#checkbox2:checked + .checkbox-label:after{
color:#f35f42;
}
/* BLUE CHECKBOX */
 
#checkbox3 + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
   -moz-box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
        box-shadow:inset 0 0 0 0px #1fc1c8,0 0 0 2px #dddddd;
}
#checkbox3:checked + .checkbox-label{
/*box-shadow*/
-webkit-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
   -moz-box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
        box-shadow:inset 0 0 0 20px #1fc1c8,0 0 0 2px #1fc1c8;
}
#checkbox3:checked + .checkbox-label:after{
color:#1fc1c8;
}

3- Voici la version avec les boutons "check/uncheck" : https://codepen.io/jreaux62/pen/bxjZzq
Le JS correspond à ce que tu as demandé pour les boutons "check/uncheck".

Code html :

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

1
2
3
4
5
6
<!-- boutons pour checker -->
<div class="buttons" style="text-align:center;">
  <button type="button" onclick="toggle_checkbox('checkbox1');">check/uncheck 1</button>
  <button type="button" onclick="toggle_checkbox('checkbox2');">check/uncheck 2</button>
  <button type="button" onclick="toggle_checkbox('checkbox3');">check/uncheck 3</button>
</div>

Code JavaScript :

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

1
2
3
4
5
6
function toggle_checkbox( checkbox_id ) 
{
	var checked = $('#'+checkbox_id).is(':checked');
	console.log( checkbox_id + ' - ' + checked );
	$('#'+checkbox_id).prop('checked',!checked).attr('checked',!checked); // on inverse
}

Pour ta "gestion à distance", il suffit d'appeler toggle_checkbox('checkbox1'); (en indiquant l'id de la checkbox à modifier).

**NoSmoking** · 15/09/2018, 11h40

Bonjour,
c'est clair que du CSS est très suffisant avec du JavaScript on ne peut plus trivial.

Concernant l'utilisation (pas forcément judicieuse donc) de switchery il ne faut pas oublier d'utiliser le script, et les méthodes associées qui vont avec, comme indiqué dans la documentation.

**none61** · 15/09/2018, 23h27

Merci à vous pour vos réponses.

N'ayant pas le temp ce week end, je vais tester cela dans la semaine et je reviens vers vous.

Encore merci c'est sympas

**NoSmoking** · 16/09/2018, 09h18

Envoyé par jreaux62

* (en tout cas, je n'ai pas trouvé comment faire... même en consultant la doc...)

Il faut regarder dans le fichier source pour voir la méthode bindClick() non documentée en direct ce qui reste surprenant !

Voir bindClick() dans switchery.js

Avec le HTML suivant :

Code html :

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

1
2
<p><input type="checkbox" id="myCheckBox" checked>
<p><button id="btn-cde">Action</button>

... cela se résume à

Code :

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

1
2
3
4
5
var oInput = document.querySelector("#myCheckBox");
var oCheck = new Switchery(oInput);
document.querySelector("#btn-cde").addEventListener("click", function() {
  oCheck.bindClick();   // simule le clic sur l'input
});

Fichier à copier/coller pour tester :

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switchery.js : méthode bindClick()</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d1893401">
<link href="http://abpetkov.github.io/switchery/dist/switchery.min.css" rel="stylesheet">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
main, #main {
  display: block;
  margin: 0 auto;
  max-width: 60em;
}
h1, h2, h3 {
  margin: .25em 0;
  color: #069;
}
section, .section {
  position: relative;
  margin: 0 2em 1em;
}
#btn-cde {
  padding: .5em 1em;
  border: 0;
  border-radius: .25em;
  font: inherit;
  line-height: 1.5;
  color: #FFF;
  background: #09E;
  box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
  cursor: pointer;
}
</style>
</head>
<body>
<main>
  <header>
    <h1>switchery.js : méthode <code>bindClick()</code></h1>
  </header>
  <section>
    <h2>HTML</h2>
<pre><code>&lt;p&gt;&lt;input type=&quot;checkbox&quot; id=&quot;myCheckBox&quot; checked&gt;
&lt;p&gt;&lt;button id=&quot;btn-cde&quot;&gt;Action&lt;/button&gt;</code></pre>
  </section>
  <section>
    <h2>JavaScript</h2>
<pre><code>var oInput = document.querySelector("#myCheckBox");
var oCheck = new Switchery(oInput);
document.querySelector("#btn-cde").addEventListener("click", function() {
  oCheck.bindClick();   // simule le clic sur l'input
});</code></pre>
  </section>
  <section>
    <h2>Rendu</h2>
      <p><input type="checkbox" id="myCheckBox" checked>
      <p><button id="btn-cde">Action</button>
  </section>
  <section>
    <h2>Ressources</h2>
    <ul>
      <li><a target="new-page" href="https://www.developpez.net/forums/d1893401/javascript/general-javascript/decochage-checkbox-javascript/">Discussion sur DVP -> Décochage checkbox Javascript</a>
      <li><a target="new-page" href="https://github.com/abpetkov/switchery" >Switchery documentation</a>
      <li><a target="new-page" href="https://github.com/abpetkov/switchery/blob/master/switchery.js">Voir <code>bindClick()</code> dans switchery.js</a>
    </ul>
  </section>
</main>
<script src="http://abpetkov.github.io/switchery/dist/switchery.min.js"></script>
<script>
var oInput = document.querySelector("#myCheckBox");
var oCheck = new Switchery(oInput);
document.querySelector("#btn-cde").addEventListener("click", function() {
  oCheck.bindClick();   // simule le clic sur l'input
});
</script>
</body>
</html>

Il n'en demeure pas moins que, même si cela se justifié à l'époque de sa sortie, une solution en pur CSS est actuellement très largement suffisante.

**none61** · 17/09/2018, 18h40

Bonjour a vous,

jreaux62 j'ai testé ton code et en effet...ça fait largement le travail

J'ai bien trouvé pour modifier toutes les couleurs (fond, ombre, couleur de texte etc...

)

Cependant lorsque j'essais de réduire la taille de celui-ci il y a une petite chose que je n'arrive pas a mettre comme je le veux...

J'arrive bien à changer la hauteur et la largeur du "rond" ainsi que du "fond" mais lorsque je fais cela, le "glissement" ne va plus a fond vers la droite...
Il doit y avoir une valeur dans le css à modifier mais je ne vois pas laquelle.

Invité · 17/09/2018, 20h38

Envoyé par none61

...mais je ne vois pas laquelle.

Nous non plus...

Cela dit, ça ne concerne plus JavaScript.
Pose la question dans le forum CSS (en montrant ton code !)

**noboxstyle** · 20/09/2018, 13h53

Salut !

Tu peux tout simplement faire ceci dans ta fonction et tu n'auras aucun soucis.

Code :

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

1
2
3
4
5
6
7
 
      function myFunction(checked) {
            var elm = document.getElementById('test');
            if (checked != elm.checked) {
                elm.click();
            }
        }

Décochage checkbox Javascript

JavaScript

Discussions similaires

Partager

Partager