Question

在互联网上搜索，我无法解决这个问题。

我有一个带定价计划开关的定价部分。逻辑本身工作正常，但是CSS复选框切换本身并不是从左向右切换。

我认为它与CSS本身或我用JS选择元素的方式有关。我还阅读了一些关于SO的话题，他们说这是WordPress的复选框问题，遗憾的是没有找到答案。

问题

在Chrome桌面上，CSS复选框切换功能无效。
在Safari，iPhone X上，CSS复选框开关复选框可以正常工作，但前提是您单击带有文本的标签元素

Link to Dropbox of me demonstrating the issue on iPhone

window.onload = function() {

  var e = document.getElementById("firstPlan"),
    d = document.getElementById("secondPlan"),
    t = document.getElementById("switcher_iOS"),
    m = document.getElementById("firstPlan_box"),
    y = document.getElementById("secondPlan_box");

  if (document.getElementById("switcher_iOS") == null) {
    var node = document.createElement("input");
    node.id = "switcher_iOS";
    node.type = "checkbox";
    node.className = "toggle_iOS--check";
    var elm = document.getElementsByClassName('toggle_iOS')[0];

    elm.insertBefore(node, elm.firstChild)
    t = document.getElementById("switcher_iOS");
  }

  e.addEventListener("click", function() {
    t.checked = false;
    e.classList.add("togglePricing--is-active");
    d.classList.remove("togglePricing--is-active");
    m.classList.remove("hide");
    y.classList.add("hide");
  });

  d.addEventListener("click", function() {
    t.checked = true;
    d.classList.add("togglePricing--is-active");
    e.classList.remove("togglePricing--is-active");
    m.classList.add("hide");
    y.classList.remove("hide");
  });

  t.addEventListener("click", function() {
    d.classList.toggle("togglePricing--is-active");
    e.classList.toggle("togglePricing--is-active");
    m.classList.toggle("hide");
    y.classList.toggle("hide");
    t.checked = !t.checked;
  })
}

/* Toggle */

#switcher_iOS {
  width: 100%;
}

.toggle_iOS,
.togglePricing {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}

.togglePricing {
  color: #ccc9c9;
  cursor: pointer;
  transition: .1s;
  font-weight: bold;
  font-size: 17px;
}

.togglePricing--is-active {
  color: #181818;
}

.toggle_iOS {
  position: relative;
  width: 58px;
  height: 28px;
  border-radius: 100px;
  background-color: #1D8BF1;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}

.toggle_iOS--check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}

.toggle_iOS--check:checked~.toggle_iOS--switch {
  right: 2px;
  left: 57.5%;
  transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: .01s, 0s;
}

.toggle_iOS--switch {
  position: absolute;
  left: 2px;
  top: 2px;
  cursor: pointer;
  bottom: 2px;
  right: 57.5%;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
  transition: 0.15s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0s, .01s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

<label class="togglePricing togglePricing--is-active" id="firstPlan">Payment Plan</label>

<div class="toggle_iOS">
  <label for="switcher_iOS"><input type="checkbox" onclick="void(0);" id="switcher_iOS" class="toggle_iOS--check" checked></label><b onclick="void(0);" class="toggle_iOS--switch"></b>
</div>

<label class="togglePricing" id="secondPlan">One Payment</label>

Answer 1

我已经简化了你的css，为了使它能够工作，你必须从点击事件的复选框中删除你的JS重置复选框的状态，例如

t.checked = !t.checked;

var t = document.getElementById("switcher_iOS");

t.addEventListener("click", function(){
  console.log("i am", this.checked);
})

.toggle_iOS{
  position: relative;
  width: 58px;
  height: 28px;
  border-radius: 100px;
  background-color: #1D8BF1;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.05);
}

.toggle_iOS--switch{
  position: absolute;
  left: 2px;
  top: 2px;
  cursor: pointer;
  bottom: 2px;
  right: 57.5%;
  background-color: #fff;
  border-radius: 36px;
  z-index: 1;
  transition: 0.15s cubic-bezier(0.785,0.135,0.15,0.86);
  transition-property: left,right;
  transition-delay: 0s,.01s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

[type=checkbox]:checked + .toggle_iOS--switch{
  left: 57.5%;
  right: 2px;
}

.toggle_iOS [type=checkbox]{
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}

<div class="toggle_iOS">
  <input type="checkbox" id="switcher_iOS">
  <div class="toggle_iOS--switch"></div>
</div>

带有JS切换功能的纯CSS Checkbox不起作用

1 个答案: