title: How to implement Jquery checkbox check all/uncheck all function with a checkbox in a loop?
body: <p>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.</p>
  
  <p>View:</p>
  
  <pre><code>&lt;div&gt;&lt;input type="checkbox" class="check_all"&gt; Check all&lt;/div&gt;
    &lt;?php
        $cnt=0;
     echo form_open('students/del_student/'.$tennant_id);
      foreach($data_student as $row)
      {
        $cnt++;
        echo"&lt;input type='hidden' name='course_occasion_id'   value=".$row-&gt;course_occasion_id."&gt;";
        ?&gt;
         &lt;address&gt;
  
       &lt;div class="row-fluid"&gt;
        &lt;div class="span2"&gt;&lt;input type='checkbox' name='student_id[]'id="student_id" value="&lt;?php echo $row-&gt;id;?&gt;"  &gt;&lt;/div&gt;
        &lt;div class="span4"&gt;&lt;?php echo anchor("students/student/$row-&gt;id/$tennant_id",$row-&gt;first_name);?&gt;&lt;/div&gt;
        &lt;div class="span4"&gt;&lt;?php echo $row-&gt;last_name;?&gt; &lt;/div&gt;
        &lt;div class="span2"&gt;&lt;?php echo $row-&gt;status;?&gt; &lt;/div&gt;
       &lt;/div&gt;
       &lt;/address&gt;
      &lt;?php
       }
       ?&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  
     $('.check_all').on('click', function () {
  
  
      $("#student_id").prop('checked', $(this).prop('checked'));
  
  
     });
    &lt;/script&gt;
  </code></pre>
  
  <p>Output:</p>
  
  <p><img src="https://i.stack.imgur.com/89yCc.png" alt="enter image description here"></p>