I am using checkboxes in table and I have a checkbox in tablehead.
What I am trying to accomplish is when I click the checkbox in head, all the checkboxes below in table rows should be checked..
Here is my HTML:
<form action="<?php $_PHP_SELF ?>" method="post">
<div class="content top">
<table id="datatable_example" class="responsive table table-striped table-bordered" style="width:100%;margin-bottom:0; ">
<thead>
<tr>
<th style="width:0px; padding-right:0px;" class="no_sort"> <label class="checkbox ">
<input type="checkbox" id="checkAll" name="checkAll" class="select_all">
</label>
</th>
<th style="width:200px;" class="no_sort"> Institue </th>
<th style="width:150px;" class="no_sort"> Education </th>
<th style="width:300px;" class="no_sort"> Description </th>
<th style="width:150px;" class="ue no_sort"> Started </th>
<th style="width:150px;" class="ue no_sort"> Completion </th>
<th class="ms no_sort "> Actions </th>
</tr>
</thead>
<tbody>
<?php echo $educations ?>
</tbody>
</table>
<div class="row-fluid control-group">
<div class="pull-left span6 " action="#">
<div>
<div class="controls inline input-large pull-left">
<select name="bulkaction" data-placeholder="Bulk actions: " class="chzn-select " id="default-select">
<option value=""></option>
<option value="delete">Delete</option>
</select>
</div>
<button type="submit" name="submitbulkaction" class="btn btn-inverse inline">Apply</button></form>
Here is php variable $education which is used in the table..
$educations .= "<tr>
<td><label class=\"checkbox\">
<input type=\"checkbox\" class=\"chkboxes\" name=\"ids[]\" value=\"$education_id\">
</label></td>
<td class=\"to_hide_phone\"> $institue_name</td>
<td class=\"to_hide_phone\"> $education_name</td>
<td>$education_desc</td>
<td>$education_started</td>
<td>$education_ended</td>
<td class=\"ms\">
<div class=\"btn-group1\">
<a href=\"education-edit.php?id=$education_id\" class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"left\" data-original-title=\" edit \">
<i class=\"gicon-edit\"></i></a>
<a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"View\">
<i class=\"gicon-eye-open\"></i>
</a>
<a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"bottom\" data-original-title=\"Remove\"><i class=\"gicon-remove \"></i></a>
</div>
</td>
</tr>";
The Jquery behind I am trying to set..
<script type="text/javascript">
$(document).ready(function(){
$('#checkAll').click(function () {
$('.chkboxes').attr('checked','checked');
});
});
</script>
Please tell me what is it I am doing wrong here, and how to fix the problem?
I looked in to other questions too posted about same issue checkboxes an most of them got solved, but still still when I apply the same code I don't get the result I want.
Update: I fixed the class name error as you all mentioned, Thank you, but now its some strange problem came up. I mean now it works but it don't works just like I click on checkbox and all checkboxes get selected on the go.. I had to refresh the page then all checkboxes will be selected? Whats up with that issue? Why I do need to refresh the page for that event to happen?
