获取切换复选框状态为true还是not [英] Get toggle checkbox status is it true or Not
本文介绍了获取切换复选框状态为true还是not的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在这种情况下,我没有得到复选框的状态是对还是错,我尽我所能,没有得到任何解决方案.当点击切换按钮时,它总是给我一个错误的值
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 it always gives me a false value
$('input').on("change", function() {
if ($('input[type="checkbox"].is(":checked")')) {
alert("its checked");
}
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="toggle" id="switch">
<label for="switch">Toggle</label>
推荐答案
使用$(this).is(":checked")
代替.
$('input').on("change", function () {
if ($(this).is(":checked")) {
alert("its checked");
}
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="toggle" id="switch">
<label for="switch">Toggle</label>
一件事,您无需将width
或height
设置为零,只需使用visibility
And one thing, you don't need to set width
or height
to zero, just use visibility
input[type=checkbox] {
/* width: 0; */
/* height: 0; */
visibility: hidden;
}
这篇关于获取切换复选框状态为true还是not的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文