0

我有这张桌子： 我的桌子

当我单击一列中的“全部选中”时，它假定该列中的所有复选框都被选中，否则。这是我的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++;  
             }

当前结果是：当第一次选中/取消选中“检查所有”时，它确实起作用，但如果我再次检查“检查所有”，则不是什么都没有。请任何人帮助我！

4

4 回答 4

6

我猜：

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

        $('[id^="client_type_'+type+'"]').prop('checked', this.checked);
});
于 2013-06-17T14:07:24.217 回答
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>
于 2014-01-22T15:53:11.113 回答
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);
    });
});

如果有人以同样的问题结束这个问题，但没有将类型编码到复选框名称中，则可能会有用。这可以通过查看列来代替。

于 2013-06-17T14:18:10.567 回答
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);
});
于 2013-06-17T14:05:15.840 回答