PHP+Jquery+Ajax实现checkbox多选删除功能

时间：00：00:00

刚刚完成了今天卡壳的一个功能。简单的说就是实现一个CHeckBox多选值的删除操作。忙到现在终于搞定了。

如上图所示，要完成一个擅长删除按钮的功能，当然，checkBox是可以多选的。

因为要求是使用PHP，所以我考虑使用AJAX来实现这个删除的功能

1.先建立一个删除的php文件。（delinfo.php）

<?php
mysql_connect("localhost","root","sa");
mysql_query('SET NAMES UTF8');
mysql_selectdb('bookshop');
    
$items=$_POST['items'];
$id=explode(",", $items);
foreach ($id as $ide)
{
    $query="delete from bs_books where book_id in ('".$ide."')";
    $result=mysql_query($query);
    if (mysql_affected_rows()>0) {
        echo "删除成功";
        echo "delete from bs_books where book_id in ('".$ide."')";
        echo $ide;
    }else {
        echo "删除失败";
        echo "delete from bs_books where book_id in ('".$ide."')";
        echo $ide;
    }
}
    

2.新建一个js文件，checkitem.js

$(document).ready(function() {
    // 全选
    $("#checkAll").click(function() {
        var flag = $("#checkAll").attr("checked");
        if (flag) {
            $("input[name='chk']").each(function() {
                $(this).attr("checked", true);
            });
        } else {
            $("input[name='chk']").each(function() {
                $(this).attr("checked", false);
            });
        }
    });
    $("#delbtn").click(function() {
        var selectItem = new Array();
        $("input[name='chk']:checked").each(function() {
            selectItem.push($(this).val());// 在数组中追加元素
        });

        if (selectItem.length == 0) {
            alert("请选择要删除的选项！");
        } else {
            $.ajax({
                type : "POST",
                url : "../AppStock/delstock.php",
                data : 'items=' + selectItem.join(","),
                dataType : "text",
                success : function(msg) {
                    msg = msg.replace(/\^\s*/, "items");
                    alert(msg);
                    if (msg == "删除成功") {
                        $("input[@name='chk']:checked").each(function() {
                            $(this).parent().parent().remove();
                        });
                    }
                }
            });
        }
    });
});

 

3.看下index.php中的checkbox文件

                        <?php         
                            mysql_connect("localhost","root","sa");
                            mysql_query('SET NAMES UTF8');
                            mysql_selectdb('bookshop');
                            $query="select * from bs_purchase bp left join bs_books bb on bb.book_id=bp.book_id ";
                            $query=$query." left join bs_users bu on bu.user_id=bb.user_id ";
                            $result=mysql_query($query);
                            while ($row=mysql_fetch_object($result))
                            {    
                                $str="<tr><td>".$row->book_name."</td><td>".$row->book_no."</td><td>".$row->book_ISBN."</td>";
                                $str=$str."<td>".$row->pur_price."</td><td>".$row->book_stock."</td><td>".$row->book_ISBN."</td>";
                                $str=$str."<td>".$row->user_name."</td>";
                                $str=$str."<td><span style='cursor:pointer;color:red;' onClick=";
                                $str=$str."OpenWindows('editinfo.php?id=$row->book_id');return false;";                                
                                $str=$str."><a>修改</a></span></td>";
                                $str=$str."<td><input type='checkbox' name='chk' id='chk' value='$row->book_id' ></td></tr>";
                                echo $str;
                                
                            }
                            mysql_free_result($result);
                            ?>

所有的代码就是上面的，这些只是一个最初版，还需要时间来修正下，譬如还没实现全选，全不选的功能。

补充，今天完善了多选，单选，全选的操作，更新了js文件。OK，修正bug是一个快乐过程。

时间不早了，晚安。。。