使用引导程序单击父复选框时，无法选中子复选框

Question

I need to dynamically display the accordance with the check box using bootstrap. 我需要使用引导程序来动态显示与复选框一致的内容。 When i click the parent check box , then my child boxes are not clicked. 当我单击父复选框时，则不会单击我的子框。 with static loading i can able to check it but when i keep the accordance code in JavaScript and run it when button is clicked I am unable to click the child check-boxes . 使用静态加载，我可以检查它，但是当我将符合性代码保存在JavaScript中并在单击按钮时运行它时，我无法单击子复选框。

code: 码：

<!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>

Answer 1

You need to delegate the click event as the checkboxes are dynamically generated. 由于复选框是动态生成的，因此需要委派click事件。 More on delegate 有关代表的更多信息

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

Demo Fiddle 演示小提琴

Answer 2

Demo Here: http://jsfiddle.net/m3o7u7Lm/2/ (built off of your demo in your comments) 此处的演示： http : //jsfiddle.net/m3o7u7Lm/2/ （在您的评论中构建了演示）

$('.childCheckBox').on('click', function() {
    // do stuff here
});

The .on('click', function() {}) takes into dynamically added elements to the dom. .on（'click'，function（）{}）将动态添加的元素添加到dom中。

Also, it would be easier for you if you built a template and then cloned like this (also shown in the demo) instead of using jquery to build the html: 另外，如果您构建了模板然后像这样进行克隆（在演示中也显示了），而不是使用jquery来构建html，那么对您来说会更容易：

<div class="content">
    <fieldset id="template">
        <label><input type="checkbox" class="parentCheckBox">Parent</input></label>
        <label><input type="checkbox" class="childCheckBox">Child 1</input></label>
        <label><input type="checkbox" class="childCheckBox">Child 2</input></label>
    </fieldset>
</div>

<a href="#" class="add">Add Another</a>

$('.add').on('click', function(event) {
    event.preventDefault();

    $('#template').clone(true).attr('id', '').appendTo('.content');
});

hope this helps! 希望这可以帮助！

使用引导程序单击父复选框时，无法选中子复选框

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-01-06 14:02:12

解决方案2
0 2015-01-06 14:36:29

使用引导程序单击父复选框时，无法选中子复选框

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-01-06 14:02:12

解决方案2 0 2015-01-06 14:36:29

解决方案1
1 已采纳 2015-01-06 14:02:12

解决方案2
0 2015-01-06 14:36:29