D�cochage checkbox Javascript

Version imprimable

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:

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

Salut,
je ferais comme ca, sans js.

Code:

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

14/09/2018, 13h38
none61

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 :D
14/09/2018, 14h06
feelwatt

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

Bonjour,
Une solution...

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

14/09/2018, 18h24
none61

Salut Eleydet,

Merci pour ta r�ponse :D 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?
14/09/2018, 19h12
Invit�
Bonjour,

Citation:

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

Citation:

"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... :koi:

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

Code:

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

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

Code:

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

O� est la difficult� ??
14/09/2018, 21h00
none61

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

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

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:

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:

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:

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:

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

15/09/2018, 11h40
NoSmoking

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.
15/09/2018, 23h27
none61

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

Citation:

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:

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

... cela se r�sume �

Code:

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:

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.

17/09/2018, 18h40
none61

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...:lol:)

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.
17/09/2018, 20h38
Invit�

Citation:

Envoy� par none61

...mais je ne vois pas laquelle.

Nous non plus... :aie:

:cristal:

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

Salut !

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

Code:

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