Pure CSS Checkbox with JS toggle not working

Question

Searched all over the internet, and I can't beat this issue.

I have a pricing section with a pricing plan switch. The logic itself is working fine, however, the CSS checkbox toggle itself isn't switching from left to right.

I assume it has to do with the CSS itself or the way I select the elements with JS. I've also read some topics on SO where they say that it's a checkbox issue with WordPress, didn't find my answer there, unfortunately.

The issue

On Chrome desktop, the CSS checkbox toggle isn't working.
On Safari, iPhone X the CSS checkbox switch checkbox does work but only if you click the label elements with text

Here's a link to the page

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>

am05mhz · Accepted Answer · 2018-01-07 16:22:00Z

I have simplified your css, and in order for this to work, you have to remove your JS that reset the state of the checkbox from the checkbox on click event such as

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>

Collectives™ on Stack Overflow

Pure CSS Checkbox with JS toggle not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related