弹出窗口内的复选框功能
Checkbox functionality inside popover
我正在尝试使用引导程序开发一个弹出窗口登录表单。我在弹出窗口中有一个复选框,我不能实现一个onClick功能到弹出窗口内的复选框。相同的功能在弹出窗口外工作良好,请告诉我。
演示:Jsfiddle
整个脚本
<script>
$(function() {
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
$('#vehicleChkBox').change(function(){
if($(this).attr('checked')){
$(this).val('TRUE');
}else{
$(this).val('FALSE');
}
alert($(this).val());
});
});
</script>
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<br>
<br>
<div class="popover-markup" data-placement="bottom"> <a href="#" class="trigger" data-placement="bottom">Popover link II</a>
<div class="head hide">Lorem Ipsum II</div>
<div class="content hide">
<form role="form">
<div class="form-group">
<label class="control-label">E-Mail</label>
<input class="form-control" id="username" placeholder="hello@example.com" type="text">
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Passwort</label>
<input class="form-control" id="password" placeholder="******" type="password">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary btn-block">Login</button>
</div>
<div class="row">
<div class="col-xs-6 col-md-8">
<div class="checkbox">
<label>
<input id="vehicleChkBox" type="checkbox"> Remember me
</label>
</div>
</div>
<div class="col-xs-6 col-md-4">
<button type="button" class="btn btn-link pull-right small" onClick="remember_me()">Register new Account</button>
</div>
</div>
</form>
<div class="footer hide">test</div>
</div>
</body>
<script>
$(function() {
$('.popover-markup>.trigger').popover({
html: true,
title: function () {
return $(this).parent().find('.head').html();
},
content: function () {
return $(this).parent().find('.content').html();
}
});
$('#vehicleChkBox').change(function(){
if($(this).attr('checked')){
$(this).val('TRUE');
}else{
$(this).val('FALSE');
}
alert($(this).val());
});
});
</script>
</html>
我建议使用on click。此外,还必须在body元素上应用绑定。然后显式地监视触发动作的特定元素,例如复选框(vehicleChkBox)或按钮。
元素没有被限定的原因是元素不可见,不能被限定。
$('body').on('click', '#vehicleChkBox', function(){
window.alert('I was clicked');
});
<<p> 更新演示/strong>: http://jsfiddle.net/D3VP9/4/ 如果你在使用复选框时遇到问题,可以使用div并添加onclick功能
<div id="uniqueID" onclick="yourFunction()"></div>
<script>
function yourFunction() {
}
</script>
用onchange
代替onClick
onchange="myFunction()"
然后在myFunction()
内部,您可以检查复选框的状态并相应地操作
相关文章:
- 具有onclick功能的自定义复选框在实际切换复选框之前执行功能
- 将复选框转换为图像,需要添加拖动功能才能更改图像
- 如何在具有分页功能的表格排序器中取消选中所有复选框
- 复选框树视图功能不起作用
- 复选框单击功能不起作用
- 在jqgrid中选中所有复选框的功能
- 选中复选框时如何激活功能
- 通过单击复选框启动智能功能
- 预选中复选框功能
- 复选框 - 选中取消选中功能不起作用
- Ruby on Rails - 我的“checkall”复选框功能跳转到数据表上的页面
- 使用Bootstrap Glyphicons创建复选框功能
- angular js中的复选框功能
- HTML javascript复选框功能
- 当父级具有单击事件时,复选框功能不起作用
- Ajax:将复选框功能转换为Wordpress中的输入字段和更新按钮
- Ajax复选框功能
- 像单选按钮一样的复选框功能
- Javascript 选中/取消选中所有复选框功能仅在有多个复选框时才有效
- 弹出窗口内的复选框功能