javascript - How to implement Jquery checkbox check all/uncheck all function with a checkbox in a loop? -

i have checkbox in loop wanted check , uncheck using jquery. have implemented jquery check , uncheck function, however, check first checkbox in loop after checking checkall labeled checkbox. how able implement correctly? codes shown below. thanks.

view:

<div><input type="checkbox" class="check_all"> check all</div>   <?php       $cnt=0;    echo form_open('students/del_student/'.$tennant_id);     foreach($data_student $row)     {       $cnt++;       echo"<input type='hidden' name='course_occasion_id'   value=".$row->course_occasion_id.">";       ?>        <address>       <div class="row-fluid">       <div class="span2"><input type='checkbox' name='student_id[]'id="student_id" value="<?php echo $row->id;?>"  ></div>       <div class="span4"><?php echo anchor("students/student/$row->id/$tennant_id",$row->first_name);?></div>       <div class="span4"><?php echo $row->last_name;?> </div>       <div class="span2"><?php echo $row->status;?> </div>      </div>      </address>     <?php      }      ?> 

javascript:

 <script type="text/javascript">     $('.check_all').on('click', function () {       $("#student_id").prop('checked', $(this).prop('checked'));      });   </script> 

output:

you creating each of checkboxes same id:

id="student_id" 

id should unique across page.

instead, change class, e.g. class="student_id" , change selector class:

$(".student_id").prop('checked', $(this).prop('checked'));