0

私はこのテーブルを持っていました： 私のテーブル

1 つの列で [すべてチェック] をクリックすると、その列のすべてのチェック ボックスがオンになっていると想定されます。これが私の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

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.checkedの代わりに$（this）.propも使用します。

$('[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 に答える