使用jQuery过滤带有复选框的mysql db内容？答案

【问题标题】：Filter content from mysql db with checkboxes using jQuery?使用jQuery过滤带有复选框的mysql db内容？
【发布时间】：2011-03-27 13:06:24
【问题描述】：

我是 jquery 和 php 的新手，我在做这件事时遇到了麻烦......

我有一个从 mysql 表中收集内容的 php 网页。我希望能够使用一些复选框来过滤此内容，但不知道如何创建复选框 jquery 代码并让它从数据库中取回选定或检查的结果以显示在页面上。

在这方面的任何帮助都会很棒。

我将在下面发布整个脚本，以便您了解我的意思。我发现很难选择（选中）一个框，然后将 id 发送到 sql 查询。因此，如果我只选中“汽车”框，页面将只显示汽车类别的结果。

脚本（我在查询中硬编码了“汽车”，脚本不起作用）：

<?php
  $ids=$_GET['id'];
  echo $ids;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SUPERMAN</title>
<link href="../style.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" >

$(document).ready(function() {    
    $(":checkbox").change(function(){

    });    
});



</script>


</head>

<body>

<div class="check_filter">


    <div id="filter">
        <input name="marketing" type="checkbox" id="marketing" /><label for="marketing">Marketing</label>
        <input name="automotive" type="checkbox" id="automotive" /><label for="automotive">Automotive</label>
        <input name="sports" type="checkbox" id="sports" /><label for="sports">Sports</label>
    </div>

</div><!-- End check_filter -->

<?php
    include('connect.php'); 

    $tableName="explore";       
    $targetpage = "index.php";  
    $limit = 10; 

    $query = "SELECT COUNT(*) as num FROM $tableName WHERE category='$ids'";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages[num];

    $stages = 3;
    $page = mysql_escape_string($_GET['page']);
    if($page){
        $start = ($page - 1) * $limit; 
    }else{
        $start = 0; 
        }   

    // Get page data ".$_POST["id"]."
    //$query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
    $query1 = "SELECT * FROM explore WHERE category='automotive' ORDER BY category LIMIT $start, $limit";
    $result = mysql_query($query1);

    // Initial page num setup
    if ($page == 0){$page = 1;}
    $prev = $page - 1;  
    $next = $page + 1;                          
    $lastpage = ceil($total_pages/$limit);      
    $LastPagem1 = $lastpage - 1;                    


    $paginate = '';
    if($lastpage > 1)
    {   




        $paginate .= "<div class='paginate'>";
        // Previous
        if ($page > 1){
            $paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
        }else{
            $paginate.= "<span class='disabled'>previous</span>";   }



        // Pages    
        if ($lastpage < 7 + ($stages * 2))  // Not enough pages to breaking it up
        {   
            for ($counter = 1; $counter <= $lastpage; $counter++)
            {
                if ($counter == $page){
                    $paginate.= "<span class='current'>$counter</span>";
                }else{
                    $paginate.= "<a href='$targetpage?&id=$ids&page=$counter'>$counter</a>";}                   
            }
        }
        elseif($lastpage > 5 + ($stages * 2))   // Enough pages to hide a few?
        {
            // Beginning only hide later pages
            if($page < 1 + ($stages * 2))       
            {
                for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
                $paginate.= "...";
                $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
                $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";       
            }
            // Middle hide some front and some back
            elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
            {
                $paginate.= "<a href='$targetpage?page=1'>1</a>";
                $paginate.= "<a href='$targetpage?page=2'>2</a>";
                $paginate.= "...";
                for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
                $paginate.= "...";
                $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
                $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";       
            }
            // End only hide early pages
            else
            {
                $paginate.= "<a href='$targetpage?page=1'>1</a>";
                $paginate.= "<a href='$targetpage?page=2'>2</a>";
                $paginate.= "...";
                for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
            }
        }

                // Next
        if ($page < $counter - 1){ 
            $paginate.= "<a href='$targetpage?page=$next'>next</a>";
        }else{
            $paginate.= "<span class='disabled'>next</span>";
            }

        $paginate.= "</div>";       


}
 echo $total_pages.' Results';
 // pagination
 echo $paginate;
?>

<ul id="pagination">

<?php 


        while($row = mysql_fetch_array($result))
        {

        echo '<li>'.$row['site_name'].'</li>';

        }

    ?>
</ul>


</body>
</html>

【问题讨论】：

附带说明，您的脚本容易受到 SQL 注入的攻击。您还需要在$ids 上使用mysql_real_escape_string。

标签： php jquery checkbox filter

【解决方案1】：

这里有一些示例代码可以帮助您入门：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
    <script>
        $(document).ready(function(){
            $("#test").click(function()
            {    
                if ($(this).is(":checked"))
                {
                        $("#example").hide();

                }else{
                        $("#example").show();
                }

            });
        });
    </script>
</head>
<body>
    <input type="checkbox" id="test"/>

    <div id="example">Hide Show</div>
</body>
</html>

您真的应该阅读jQuery 以了解正在发生的事情，但要让您开始：这块$("whatever") - 被称为选择器。基本上，这就是您在 DOM 中找到所需内容的方式。

$("#whatever") 通过 ID 获取项目
$(".whatever") 通过类名获取项目
$("whatever") 通过其节点获取项目
$(whatever) 通常用于选择“文档”或“窗口”等特殊内容

找到所需的项目后，您可以添加事件或调用方法。以上就是$("whatever").之后的所有内容了

请意识到这是一个超级基本的总结，所以如果有机会请仔细阅读。

【讨论】：