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 at 20:55
Barmar
418k34243344
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
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 at 20:55
Barmar
418k34243344
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
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 at 20:55
Barmar
418k34243344
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
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 at 20:55
Barmar
418k34243344
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
edited Nov 20 at 20:55
Barmar
418k34243344
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
edited Nov 20 at 20:55
Barmar
418k34243344
edited Nov 20 at 20:55
Barmar
418k34243344
edited Nov 20 at 20:55
Barmar
418k34243344
418k34243344
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
asked Nov 20 at 20:08
Jirakit Paitoonnaramit
394
394
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 at 20:55
Demian
1637
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 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 at 20:55
Demian
1637
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 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 at 20:55
Demian
1637
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 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 at 20:55
Demian
1637
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 at 20:55
Demian
1637
edited Nov 20 at 21:12
answered Nov 20 at 20:55
Demian
1637
answered Nov 20 at 20:55
Demian
1637
answered Nov 20 at 20:55
Demian
1637
1637
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 at 21:52
add a comment |
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 at 21:52
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 at 21:52
nice that code has worked. thank you for save my day!!
– Jirakit Paitoonnaramit
Nov 20 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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
