html code
<input type="checkbox" name="toggle" id="switch">
<label for="switch">Toggle</label>
css
input[type=checkbox] {
width: 0;
height: 0;
visibility: hidden;
}
label {
cursor: pointer;
text-indent: -9999px;
width: 50px;
height: 20px;
background: grey;
display: block;
border-radius: 100px;
position: relative;
}
label:after {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 14px;
height: 14px;
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: 30px;
}
jquery script
$('input').on("change", function () {
if ($('input[type="checkbox"].is(":checked")')) {
alert("its checked");
}
});
in this, i do not get a status of checkbox is it true or false I try my best I did not get any solution. when click on toggle its always give me a false value please help me.
Aucun commentaire:
Enregistrer un commentaire