<table id="tbl" class="display table-responsive"> <thead> <tr> <th> <input type="checkbox" id="chkParent" name="studentlist[]" /> </th> <th>Student Id</th> <th>Photo</th> <th>Name</th> <th>Email</th> <th>Contact</th> <th>Course</th> <th>Batch</th> </tr> </thead> <tbody id="tbl-tbody"> <?php $sno = 1; foreach ($student_list as $student) { if (empty($student['photo'])) { $profile_path = base_url() . "common_assets/user.png"; } else if (file_exists('assets_student/application/' . $student['photo'])) { $profile_path = base_url() . "assets_student/application/" . $student['photo']; } else { if ($student['gender'] == 'Male' || $student['gender'] == 'male') $profile_path = base_url() . "common_assets/male_image.jpg"; else $profile_path = base_url() . "common_assets/female_image.jpg"; } ?> <tr> <td> <input type="checkbox" name="student_list[]" value="<?= $student['id']; ?>" /> </td> <td><?= $student['studentId']; ?></td> <td> <img src="<?= $profile_path; ?>" class="student_img_list" /></td> <td><?= $student['name']; ?></td> <td><?= $student['email']; ?></td> <td><?= $student['mobile']; ?></td> <td><?php $course_name = $this->db->get_where('course', array('id' => $student['course']))->row()->course_name; echo (!empty($course_name)) ? $course_name : ''; ?></td> <td> <?php $batch = $this->db->get_where('batch', array('id' => $student['batch_id'], 'is_active' => 'yes'))->row_array(); echo $batch['b_name']; ?> </td> </tr> <?php $sno++; } ?> </tbody> </table> </form> <script> $(document).ready(function() { //table js $('#tbl').DataTable({ "lengthMenu": [ [25, 50, 100, 150, -1], [25, 50, 100, 150, "All"] ], }); //table js end }); $(document).ready(function() { $('#chkParent').click(function() { var isChecked = $(this).prop("checked"); $('#tbl tr:has(td)').find('input[type="checkbox"]').prop('checked', isChecked); }); $('#tbl tr:has(td)').find('input[type="checkbox"]').click(function() { var isChecked = $(this).prop("checked"); var isHeaderChecked = $("#chkParent").prop("checked"); if (isChecked == false && isHeaderChecked) $("#chkParent").prop('checked', isChecked); else { $('#tbl tr:has(td)').find('input[type="checkbox"]').each(function() { if ($(this).prop("checked") == false) isChecked = false; }); console.log(isChecked); $("#chkParent").prop('checked', isChecked); } }); }); </script>