CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Navyah
Navyah

Reputation: 1680

Unable to check the child checkbox when parent checkbox is clicked using bootstrap

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 .

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>

Upvotes: 0

Views: 959

Answers (2)

indubitablee
indubitablee

Reputation: 8206

Demo Here: http://jsfiddle.net/m3o7u7Lm/2/ (built off of your demo in your comments)

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

The .on('click', function() {}) takes into dynamically added elements to the 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:

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

Upvotes: 0

anpsmn
anpsmn

Reputation: 7257

You need to delegate the click event as the checkboxes are dynamically generated.More on delegate

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

Demo Fiddle

Upvotes: 1

Related Questions