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

Question

I have a checkbox in a loop that I wanted to check all and uncheck all using jquery. I have implemented a Jquery check all and uncheck all function, however, it only check the first checkbox in the loop after checking the checkall labeled checkbox. How would I able to implement this correctly? Codes are 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 as $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:

Answer 1

You are creating each of your checkboxes with the same id:

id="student_id"

ID should be unique across the page.

Instead, change this to a class, eg class="student_id" and change your selector to look for the class:

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

Answer 2

The id s have to be unique in the document.

In jQuery, Instead of #id use .class and in HTML use class=... instead of id=... .

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

Take a look atthe difference between id and class in HTML:

• id = name [CS]

  This attribute assigns a name to an element. This name must be unique in a document.

• class = cdata-list [CS]

  This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.

Answer 3

Use class instead..because id is unique

  $('.check_all').on('click', function () {

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

   });

and your html

<div class="span2"><input type='checkbox' name='student_id[]' class="std" value="<?php echo $row->id;?>"  ></div>

Answer 4

Below javascript helps to check uncheck all checkbox options in a loop.

function FunCheckAll(obj) {            
if (obj.checked) {
    $('.chkSelectAll').each(function (i, e) {
        if ($(e).is(":not(:visible())") == false) {
            $(e).prop('checked', true);                        
        }
    });
}
else {
    $('.chkSelectAll').each(function (i, e) {
        $(e).prop('checked', false);                    
    });
}

}

chkSelectAll is the name of class used with the checkboxes.