change toggle button by js
2
I have this code make one button and get some value from server.
then on load ( init view ) I got value = 1 and I need make toggle switch turn on automatically.
the code as below
var value = 1;.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>so I need some javascript to make value 1 in js to toggle button on. programmatically and if 0 is off.
I need use it on init view only
javascript html css toggle
edited Nov 20 '18 at 20:55
Barmar
428k36250352
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
add a comment |
2
I have this code make one button and get some value from server.
then on load ( init view ) I got value = 1 and I need make toggle switch turn on automatically.
the code as below
var value = 1;.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>so I need some javascript to make value 1 in js to toggle button on. programmatically and if 0 is off.
I need use it on init view only
javascript html css toggle
edited Nov 20 '18 at 20:55
Barmar
428k36250352
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
add a comment |
2
2
2
I have this code make one button and get some value from server.
then on load ( init view ) I got value = 1 and I need make toggle switch turn on automatically.
the code as below
var value = 1;.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>so I need some javascript to make value 1 in js to toggle button on. programmatically and if 0 is off.
I need use it on init view only
javascript html css toggle
edited Nov 20 '18 at 20:55
Barmar
428k36250352
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
I have this code make one button and get some value from server.
then on load ( init view ) I got value = 1 and I need make toggle switch turn on automatically.
the code as below
var value = 1;.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>so I need some javascript to make value 1 in js to toggle button on. programmatically and if 0 is off.
I need use it on init view only
var value = 1;.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>var value = 1;.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {
display: none;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked+.slider {
background-color: #2ab934;
}
input:focus+.slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked+.slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on {
display: none;
}
.on,
.off {
color: white;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+.slider .on {
display: block;
}
input:checked+.slider .off {
display: none;
}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="bit00_3" value="off" onclick="toggle(this);">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>javascript html css toggle
javascript html css toggle
edited Nov 20 '18 at 20:55
Barmar
428k36250352
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
edited Nov 20 '18 at 20:55
Barmar
428k36250352
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
edited Nov 20 '18 at 20:55
Barmar
428k36250352
edited Nov 20 '18 at 20:55
Barmar
428k36250352
edited Nov 20 '18 at 20:55
Barmar
428k36250352
428k36250352
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
asked Nov 20 '18 at 20:08
Jirakit PaitoonnaramitJirakit Paitoonnaramit
396
396
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
First, you have 2 ids in the same html page, I have changed the input to checkbox1.
Second, the toggle function did not exist and was not being used, at least in the example, so I removed it.
Third, I removed the value of your input because you were not using it, if you want to get the value, just use document.getElementById("checkbox1").checked or just checkbox1.checked (with checkbox assigned to a var)
Just call checkbox1.checked = {0 for unchecked and 1 for checked} or just checkbox1.checked (with checkbox assigned to a var)
obs: I did not use jquery because I did not know if you are using on this page
var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400766%2fchange-toggle-button-by-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
First, you have 2 ids in the same html page, I have changed the input to checkbox1.
Second, the toggle function did not exist and was not being used, at least in the example, so I removed it.
Third, I removed the value of your input because you were not using it, if you want to get the value, just use document.getElementById("checkbox1").checked or just checkbox1.checked (with checkbox assigned to a var)
Just call checkbox1.checked = {0 for unchecked and 1 for checked} or just checkbox1.checked (with checkbox assigned to a var)
obs: I did not use jquery because I did not know if you are using on this page
var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
add a comment |
1
First, you have 2 ids in the same html page, I have changed the input to checkbox1.
Second, the toggle function did not exist and was not being used, at least in the example, so I removed it.
Third, I removed the value of your input because you were not using it, if you want to get the value, just use document.getElementById("checkbox1").checked or just checkbox1.checked (with checkbox assigned to a var)
Just call checkbox1.checked = {0 for unchecked and 1 for checked} or just checkbox1.checked (with checkbox assigned to a var)
obs: I did not use jquery because I did not know if you are using on this page
var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
add a comment |
1
1
1
First, you have 2 ids in the same html page, I have changed the input to checkbox1.
Second, the toggle function did not exist and was not being used, at least in the example, so I removed it.
Third, I removed the value of your input because you were not using it, if you want to get the value, just use document.getElementById("checkbox1").checked or just checkbox1.checked (with checkbox assigned to a var)
Just call checkbox1.checked = {0 for unchecked and 1 for checked} or just checkbox1.checked (with checkbox assigned to a var)
obs: I did not use jquery because I did not know if you are using on this page
var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
First, you have 2 ids in the same html page, I have changed the input to checkbox1.
Second, the toggle function did not exist and was not being used, at least in the example, so I removed it.
Third, I removed the value of your input because you were not using it, if you want to get the value, just use document.getElementById("checkbox1").checked or just checkbox1.checked (with checkbox assigned to a var)
Just call checkbox1.checked = {0 for unchecked and 1 for checked} or just checkbox1.checked (with checkbox assigned to a var)
obs: I did not use jquery because I did not know if you are using on this page
var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div> var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div> var value = 1;
//you can put the checkbox in a variable,
//this way you do not need to do a javascript query every time you access the value of the checkbox
var checkbox1 = document.getElementById("checkbox1")
checkbox1.checked = value
document.getElementById("checkbox1").addEventListener("change", function(element){
console.log(checkbox1.checked)
});.switch {
position: relative;
display: inline-block;
width: 100px;
height: 34px;
}
.switch input {display:none;}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ca2222;
-webkit-transition: .4s;
transition: .4s;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2ab934;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(68px);
-ms-transform: translateX(68px);
transform: translateX(68px);
}
.on
{
display: none;
}
.on, .off
{
color: white;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
font-size: 10px;
font-family: Verdana, sans-serif;
}
input:checked+ .slider .on
{display: block;}
input:checked + .slider .off
{display: none;}<div align="center" id="bit00_3">
<label class="switch">
<input type="checkbox" id="checkbox1">
<div class="slider round">
<span class="on">ON</span>
<span class="off">OFF</span>
</div>
</label>
</div>answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
edited Nov 20 '18 at 21:12
answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
answered Nov 20 '18 at 20:55
Demian BibianoDemian Bibiano
1789
1789
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
add a comment |
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 '18 at 21:52
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400766%2fchange-toggle-button-by-js%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
