Issue
I cannot get my alternate background-image to be toggled to when I click on my toggle checkbox ‘button’. I inputted my relevant code into CodePen and it was able to toggle correctly; however, when I copy it into my text editor (as shown in the code below, it fails to even get to the alert statement nested within this line: “$(‘input[type=”checkbox”]’).click(function(){“.
I followed “https://www.w3schools.com/howto/howto_css_switch.asp” to create the switch; however, unclear as to why they nested input into the label tag, or why they included a span tag. Any help or explanation would be greatly appreciated.
HTML (part of my code):
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
CSS (part of my code):
body {
background-image: url(background.png);
...
}
/* the box around the slider */
.switch {
position: absolute;
display: inline-block;
width: 60px;
height: 34px;
top: 37px;
left: 40px;
}
/* hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
JAVASCRIPT (all of my code):
$('input[type="checkbox"]').click(function(){
alert("got here");
if($(this).is(":checked")){
$('body').css("background-image", "url(background-dark.png)");
}
else if($(this).is(":not(:checked)")){
$('body').css("background-image", "url(background1.png)");
}
});
I expected the background image to change to ‘background-dark.png’ every time I clicked the toggle switch; however, nothing seems to happen when I repeatedly click on the toggle switch.
Solution
Your switch works fine. The included span is there to replace HTML’s original checkbox. Label is used to show description of an input element. Currently, however, they have not included any text with it and are using it as a wrapper to position and size the checkbox.
$('input[type="checkbox"]').click(function(){
if($(this).is(":checked")){
$('body').css("background-image", "url(https://www.w3schools.com/html/img_girl.jpg)");
}
else if($(this).is(":not(:checked)")){
$('body').css("background-image", "url(https://www.w3schools.com/html/pic_trulli.jpg)");
}
});body {
background-image: url(https://www.w3schools.com/html/pic_trulli.jpg);
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.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: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</body>Answered By – Cray
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0