Jquery display checkbox switch value

Question

I am trying to pull value of checkbox based on switch selected. How can I pull value of selected switch?

Here is my Fiddle

input[type=checkbox]{
 height: 0;
 width: 0;
 visibility: hidden;
}

label {
 cursor: pointer;
 text-indent: -9999px;
 width: 200px;
 height: 100px;
 background: grey;
 display: block;
 border-radius: 100px;
 position: relative;
}

label:after {
 content: '';
 position: absolute;
 top: 5px;
 left: 5px;
 width: 90px;
 height: 90px;
 background: #fff;
 border-radius: 90px;
 transition: 0.3s;
}

input:checked + label {
 background: #bada55;
}

input:checked + label:after {
 left: calc(100% - 5px);
 transform: translateX(-100%);
}

label:active:after {
 width: 130px;
}

// centering
body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
}

<input type="checkbox" id="switch" /><label for="switch">Toggle</label>

Edit: This is different from reading a checkbox value. This is a label.

Possible duplicate of [use jQuery to get values of selected checkboxes](https://stackoverflow.com/questions/11292778/use-jquery-to-get-values-of-selected-checkboxes) — devlin carnate, Apr 10 '18 at 21:31
The question I have is a Switch checkbox instead of normal checkbox. — Kurkula, Apr 10 '18 at 21:33
no, you have a checkbox that's styled as a switch. The HTML renders as a checkbox. jQuery / JS work on HTML DOM elements, and not their rendering after CSS is applied. — devlin carnate, Apr 10 '18 at 21:34

score 0 · Answer 1 · answered Apr 10 '18 at 21:57

Going with your fiddle, here’s an example with the answer included.

<input type="checkbox" id="switch" onchange="document.getElementById('state').innerHTML=(this.checked?'on':'off');"/><label for="switch">Toggle</label>

Ergo, query the input’s checked property.

Jquery display checkbox switch value

1 Answers1