Question

我有这张桌子： my table

当我单击一列中的“全部检查”时，它应该检查该列中的所有复选框，否则将被检查。这是我的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

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

Answer 3

没有测试代码，因为它是PHP我会建议这样的东西。我保持click事件，因为我不信任（仅用于）字段模糊时触发的更改事件我也使用$（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 4

+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);
    });
});

如果有人在同一问题上结束这个问题，但是没有将类型编码到复选框名称中，那么可能会有用。这可以通过查看列来实现。

JQuery检查列中的所有复选框

4 个答案: