Как реализовать флажок Jquery check check all/uncheck all function с помощью флажка в цикле?

Question

У меня есть флажок в цикле, который я хотел проверить, и снять флажок с помощью jquery. Я выполнил проверку Jquery all и снимет все функции, однако он проверяет только первый флажок в цикле после проверки флажка checkall labeled. Как я смогу реализовать это правильно? Коды показаны ниже. Благодарю.

Вид:

<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> 

Выход:

Answer 1

Вы создаете каждый из ваших флажков с тем же идентификатором:

id="student_id" 

ID должен быть уникальным на всей странице.

Вместо этого измените это на класс, например. class="student_id" и изменить селектор для поиска класса:

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

Answer 2

В id s должны быть уникальными в документе.

В jQuery, вместо #id используйте .class и в HTML используйте class=... вместо id=....

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

Посмотрите на the difference between id and class в HTML:

• id = name [CS]

  Этот атрибут присваивает имя элементу. Это имя должно быть уникальным в документе.

• class = cdata-list [CS]

  Этот атрибут присваивает имя класса или набор имен классов элемента. Любому количеству элементов может присваиваться имя или имена одного и того же класса. Несколько имен классов должны быть разделены пробелами.

Answer 3

Использование class instead..because id является уникальным

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

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

    }); 

и ваш HTML

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