How to toggle between background images using input type = checkbox that is nested within label class="..."?

Question

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.

score 0 · Accepted Answer · answered Jun 11 '19 at 05:30

0

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 Jun 11 '19 at 05:30

Cray

2,774
7
22
32

Hi Cray, thanks for your input. I added the script you included and even tried to use your particular images; however, when I load/preview the html file on my computer and I use the toggle switch, the background image still does not change. I tried to see what the problem was by adding an alert statement into my JS file as seen below.. $('input[type="checkbox"]').click(function(){ if($(this).is(":checked")){ alert("here"); ... }); however, my code never seems to reach the statement. I linked my javascript file as such: – Rebecca Jun 11 '19 at 06:19
Your original post is missing some of the CSS. Do you even have the switch button the way my snippet has? Other than that does the javascript file load or is it getting 404 error? Must be something missing or wrong in configuration as the almost same code works in my snippet. – Cray Jun 11 '19 at 06:30
I am now able to toggle between the two photos that you use; however, when I plug in my .png file into the 'background-image: url(background.png)' I am unable to toggle the photo. Am I allowed to have a .png file saved to the same folder as the html file and can I access it through the url() method? Thanks! – Rebecca Jun 11 '19 at 06:59
for reference.. $(document).ready(function() { $('input[type="checkbox"]').click(function(){ if($(this).is(":checked")){ $('body').css("background-image", "url(background-dark.png)"); } else if($(this).is(":not(:checked)")){ $('body').css("background-image", "url(background.png)"); } }); }); – Rebecca Jun 11 '19 at 07:01
So you are getting a 404 error in browser console for the image? [How relative paths work](https://www.w3schools.com/html/html_filepaths.asp). And yes, you can have images in any folder that can be accessed and use it in `url()`. – Cray Jun 11 '19 at 07:03
I was but it's fixed now. Thank you for all your help! (: – Rebecca Jun 11 '19 at 07:07
No problem, you can mark the question as answered then. – Cray Jun 11 '19 at 07:08

How to toggle between background images using input type = checkbox that is nested within label class="..."?

1 Answers1