gpt4 book ai didi

javascript - 使用 Bootstrap 单击父复选框时无法检查子复选框

转载 作者:行者123 更新时间:2023-12-03 11:07:06 25 4
gpt4 key购买 nike

我需要使用 Bootstrap 动态显示符合复选框的内容。当我单击父复选框时,我的子框不会被单击。通过静态加载,我可以检查它,但是当我将相应代码保留在 JavaScript 中并在单击按钮时运行它时,我无法单击子复选框。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script>
function getAccordiance()
{
var html ='';
html+='<div class="box-body subjectareaComparsion"> <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading">';
html+='<h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject1"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Sample1</a></h4> </div><div id="collapseOne" class="panel-collapse collapse in">';
html+=' <div class="panel-body"><table class="table table-striped"><tr><td><div class="checkbox"> <input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label></div></td></tr> </table></div> </div></div> <div class="panel panel-default">';
html+='<div class="panel-heading"> <h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject2"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> Sample2</a></h4></div><div id="collapsetwo" class="panel-collapse collapse">';
html+='<div class="panel-body"><table class="table table-striped"><tr> <td> <div class="checkbox"><input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label> </div></td></tr> </table> </div></div> </div></div> </div>';
$('#dataload').html(html);
}
</script>
</head>
<body class="skin-blue">
<header class="header"> <a href="index.html" class="logo">
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">

<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Sample</li>
</ol>
</section>

<!-- Main content -->
<section class="content">
<div class="row ">
<!-- left column -->
<div class="col-md-6">
<!-- Subject Area -->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"> Area</h3>
</div>
<button onclick="getAccordiance()">Submit</button>
<div id="dataload"></div>


</div>
</div>
</div>
</section>
<!-- /.content -->
</aside>
<!-- /.right-side -->
</div>
<!-- ./wrapper -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.chckHead').on('click',function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});


</script>
</body>
</html>

最佳答案

您需要委托(delegate)单击事件,因为复选框是动态生成的。 More on delegate

$(document).on('click', '.chckHead', function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});

Demo Fiddle

关于javascript - 使用 Bootstrap 单击父复选框时无法检查子复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27798214/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com