如何使用嵌套在标签 class="..." 中的 input type = checkbox 在背景图像之间切换？

Question

当我点击切换复选框 'button' 时，无法切换到备用背景图像。我将我的相关代码输入到CodePen中，它能够正确切换；但是，当我将它复制到我的文本编辑器中时（如下面的代码所示，它甚至无法到达嵌套在该行中的警报语句：“$('input[type="checkbox"]').click(function(){”。

我按照“https://www.w3schools.com/howto/howto_css_switch.asp”创建了开关；然而，不清楚为什么他们将输入嵌套到标签标签中，或者为什么他们包含一个 span 标签。任何帮助或解释将不胜感激。

HTML（我的部分代码）：

<label class="switch">
   <input type="checkbox">
   <span class="slider round"></span>
</label>

CSS（我的部分代码）：

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（我所有的代码）：

$('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)");
    }
});

我希望每次单击切换开关时背景图像都会更改为 'background-dark.png'；但是，当我反复点击切换开关时，似乎没有任何反应。

Answer 1

您的开关工作正常。包含的 span 用于替换 HTML 的原始复选框。 Label 用于显示 input 元素的描述。然而，目前他们还没有包含任何文本，而是将其用作包装器来定位和调整复选框的大小。

$('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>

如何使用嵌套在标签 class="..." 中的 input type = checkbox 在背景图像之间切换？

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

html

javascript

css

checkbox

toggle