获取选中的引导复选框的值
我有这个HTML表单:
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
我怎么知道输入是否被检查?
我尝试这样但没有提示:
$(document).on('click','.animated-switch',function(e){
alert($('#switch-success:checked').val() );
});
这里有一个JSFIDDLE文件,以便查看我的清晰示例:https://jsfiddle.net/s2f9q3fv/
您的代码在代码段中正常工作。 您已经忘记为您的复选框添加值,但即使没有它,您也应该能够看到具有未定义值的警报消息(请参阅下面的代码段中添加的'test'值)。
$(document).on('click','#switch-success:checked',function(e){
alert($('#switch-success:checked').val() );
});
.animated-switch > input[type="checkbox"] {
display: none; }
.animated-switch > label {
cursor: pointer;
height: 0px;
position: relative;
width: 40px; }
.animated-switch > label::before {
background: black;
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
border-radius: 8px;
content: '';
height: 16px;
margin-top: -8px;
position: absolute;
opacity: 0.3;
transition: all 0.4s ease-in-out;
width: 40px; }
.animated-switch > label::after {
background: white;
border-radius: 16px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
content: '';
height: 24px;
left: -4px;
margin-top: -8px;
position: absolute;
top: -4px;
transition: all 0.3s ease-in-out;
width: 24px; }
.animated-switch > input[type="checkbox"]:checked + label::before {
background: inherit;
opacity: 0.5; }
.animated-switch > input[type="checkbox"]:checked + label::after {
background: inherit;
left: 20px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="animated-switch">
<input id="switch-success" name="switch-success" checked="" value="test" type="checkbox">
<label for="switch-success" class="label-success"></label>
</div>
如果复选框被选中,那会得到。
$('#' + id).is(":checked")
尝试这个
$(".animated-switch").change(function () {
alert($('#switch-success:checked').val() );
});
链接地址: http://www.djcxy.com/p/55987.html