JQuery проверить все флажки в столбце

Question

Я имел эту таблицу:

Когда я нажмите кнопку «Проверить все» в одном столбце, его предполагается, что все флажки в этом столбце с проверены и в противном случае. Вот мой JQuqey:

$(document).ready(function() { 
    $('[id^="check_"]').on('click', function(){ 
     perm_type=$(this).attr('id'); 
     type=perm_type.substring(6); 

     if(!($('#check_'+type).attr('checked'))) { 
      $("[id^=client_type_"+type+"]").attr('checked', true); 
      $('#check_'+type).attr('checked', true); 
      } 
     else { 
      $("[id^=client_type_"+type+"]").attr('checked',false); 
      $('#check_'+type).attr('checked',false); 
      } 

    }); 
}); 

Там мой HTML:

echo '<tr bgcolor="'.($bgcol[$inx % 2]).'"><td></td><td></td><td></td><td></td><td></td><td></td></tr>'; 
      echo '<tr bgcolor="'.($bgcol[$inx % 2]).'">';   
      echo '<td valign="top" align="center"><b>'; 
      echo $row['title']; 
      echo '</b></td>'; 
      echo '<td valign="top" align="center">'; 
      echo '<b>Clients Types</b>'; 
      echo '</td>';  
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' id='check_select'> Check all"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' id='check_insert'> Check all"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' id='check_update'> Check all"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' id='check_delete'> Check all"; 
      echo '</td>';     
      echo "</tr>"; 

      $nr=0; 
      $cli = //my query here; 
       $result=$db->sql_query($cli); 
       while($r=$db->sql_fetchrow($result)){ 
      $s =$db->sql_fetchrow($db->sql_query(//my query here")); 

      echo '<tr bgcolor="'.($bgcol[$inx % 2]).'">';   
      echo '<td></td><td valign="top" align="center">'; 
      echo $r['type']; 
      echo "<input type='hidden' id='cli_type_id".$nr."' value='".$r['type_id']."'>"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' name='rights[".$r['type_id']."][select]' id='client_type_select".$nr."' value='true' "; echo $s['sel']?"checked":""; echo ">"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' name='rights[".$r['type_id']."][insert]' id='client_type_insert".$nr."' value='true' "; echo $s['ins']?"checked":""; echo ">"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' name='rights[".$r['type_id']."][update]' id='client_type_update".$nr."' value='true' "; echo $s['upd']?"checked":""; echo ">"; 
      echo '</td>'; 
      echo '<td valign="top" align="center">'; 
      echo "<input type='checkbox' name='rights[".$r['type_id']."][delete]' id='client_type_delete".$nr."' value='true' "; echo $s['del']?"checked":""; echo ">"; 
      echo '</td>';     
      echo "</tr>"; 
       $nr++; 
      } 

Текущий результат: Когда один чек/снимите флажок в первый раз «проверить все», это делает функцию, но если я снова проверяю «проверить все», это ничего не значит. Пожалуйста, помогите мне!

Answer 1

Я догадываюсь:

$(function() { 
    $('[id^="check_"]').on('change', function(){ 
     var type = this.id.split('_')[1]; 

     $('[id^="client_type_'+type+'"]').prop('checked', this.checked); 
}); 

Answer 2

Без тестирования кода, так как это PHP, я бы предложил что-то вроде этого. Я сохраняю событие клика, потому что не доверяю событию изменения, которое (используется) запускается только при помутнении полей. Я тоже пользователь $ (this) .prop вместо this.checked, чтобы быть уверенным.

$('[id^="check_"]').on('click', function(){ 
    var checked = $(this).prop("checked"); 
    var type=this.id.split("_")[1]; 
    $("[id^=client_type_"+type+"]").prop("checked",checked); 
}); 

Answer 3

+1 к другим ответам, но и для более общего решения:

$('[id^="check_"]').on('change', function(){ 
    var checked = $(this).prop('checked'); 
    var index = $(this).parent().index(); 

    $('tr').each(function(i, val){ 
     $(val).children().eq(index).children('input[type=checkbox]').prop('checked', checked); 
    }); 
}); 

Может быть полезно, если кто-нибудь в конце концов по этому вопросу с та же проблема, но не имеет типов, закодированных в именах флажков. Это работает, глядя вместо столбца.

Answer 4

На основе и вдохновленный http://beckelman.net/2008/11/18/select-all-checkboxes-in-a-table-column-with-and-without-jquery-plugin-demo/, но и для всех столбцов в таблице:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tableOne thead tr th input:checkbox").click(function() { 
      var checkedStatus = this.checked; 
      var index = $(this).parent().index() + 1; 
      $("#tableOne tbody tr td:nth-child("+index+") input:checkbox").each(function() { 
       this.checked = checkedStatus; 
      }); 
     }); 
    }); 
</script>