i have put one checkbox in header for the select other check boxes but click event not working on header. 

Javascript code

```
$(document).ready(function () {
 $('#example').on('click','.checkAll', function () {
    alert("hi");
    if ($(this).prop('checked')) {
        $('.otherChechBox').prop('checked', true);
        selected = [];
        $(".otherChechBox:checked").each(function () {
            selected.push($(this).val());
        });
    } else {
        $('.otherChechBox').prop('checked', false);
        selected = [];
    }
});
});

```

HTML Code

```
  <table id="example" class="table table-striped table-bordered table-fixed-column order-column dataex-column-width">
                        <thead>
                        <tr>
                            <th class="text-center col-md-1"><input class="checkAll" name="agree" id="checkAll" type="checkbox" ></th>
                            <th>#</th>
                            <th>Permission Parent</th>
                            <th>Permission Name</th>
                            <th>Slug</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($permissions as $permission)
                        <tr>
                            <td class="text-center"><input class="otherChechBox" name="agree[]" id="{{$permission->id}}" type="checkbox" value="{{$permission->id}}"></td>
                            <td>{{$permission->id}}</td>
                            <td>{{$permission->permission_parent}}</td>
                            <td>{{$permission->permission_name}}</td>
                            <td>{{$permission->slug}}</td>
                            <td>
                                <a href="{{url('/Admin/permission/edit',$permission->id)}}"><i class="fa fa-edit" style="font-size:20px;"></i></a>
                                <a href="#"><i class="fa fa-trash-o" style="font-size:20px;color:red;"></i></a>
                            </td>
                        </tr>
                        @endforeach
                        </tbody>
                    </table>

```

i have also tried this 

```
$('#example').on('click','.checkAll', function () {..});

```

click event working perfectly in `<td>` but not working in `<th>`