ajax全选、全不选、反选、单删/批删

show.php

<meta charset="utf-8">
<?php
//链接数据库
$link = mysqli_connect(‘127.0.0.1‘,‘root‘,‘root‘,‘mone‘);
//设置字符集
mysqli_query($link,‘set names utf8‘);

//接收当前页
$page = empty($_GET[‘page‘])?1:$_GET[‘page‘];
//求出总条数
$sql = "select * from user";
$res = mysqli_query($link,$sql);
$count = mysqli_num_rows($res);
//每页显示多少条
$length = 3;
//求出总页数
$num_page = ceil($count/$length);
//偏移量
$limit = ($page-1)*$length;
//查询
$sql2 = "select * from user limit $limit,$length";
$res2 = mysqli_query($link,$sql2);
while($a=mysqli_fetch_assoc($res2)){
    $data[‘data‘][] = $a;
}

$data[‘home_page‘] = 1;
$data[‘prev_page‘] = $page-1<1?1:$page-1;
$data[‘next_page‘] = $page+1>$num_page?$num_page:$page+1;
$data[‘last_page‘] = $num_page;

?>
<table>
    <tr>
        <th>选择</th>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>性别</th>
        <th>年龄</th>
        <th>班级</th>
        <th>手机</th>
        <th>编辑</th>
    </tr>
    <div id="main">
    <?php foreach($data[‘data‘] as $k=>$v){ ?>
    <tr id="<?php echo $v[‘user_id‘];?>">
        <td><input type="checkbox" name="check" value="<?php echo $v[‘user_id‘];?>"></td>
        <td><?php echo $v[‘user_id‘];?></td>
        <td><?php echo $v[‘username‘];?></td>
        <td><?php echo $v[‘pwd‘];?></td>
        <td><?php echo $v[‘sex‘];?></td>
        <td><?php echo $v[‘age‘];?></td>
        <td><?php echo $v[‘class_name‘];?></td>
        <td><?php echo $v[‘phone‘];?></td>
        <td>
            <a href="">修改</a>
        </td>
    </tr>
    <?php } ?>
</div>
</table>

<button onclick="fun1()">全选</button>
<button onclick="fun2()">全不选</button>
<button onclick="fun3()">反选</button>
<button onclick="fun4()">单删/批删</button>
<script>

    function fun1(){
        var check = document.getElementsByName(‘check‘);
        for(var i=0;i<check.length;i++){
            if(check[i].checked==false){
                check[i].checked=true;
            }
        }
    }

    function fun2(){
        var check = document.getElementsByName(‘check‘);
        for(var i=0;i<check.length;i++){
            if(check[i].checked==true){
                check[i].checked=false;
            }
        }
    }

    function fun3(){
        var check = document.getElementsByName(‘check‘);
        for(var i=0;i<check.length;i++){
            if(check[i].checked==true){
                check[i].checked=false;
            }else{
                check[i].checked=true;
            }
        }
    }

    function fun4(){
        var arr = document.getElementsByName(‘check‘);
        var ar = [];
        for(var i=0;i<arr.length;i++){
            if(arr[i].checked==true){
                ar.push(arr[i].value);
            }
        }

        var id = ar.toLocaleString();
        if(id==‘‘){
            alert(‘请先选择一项‘);
            return false;
        }else{
            //ajax请求
            var ajax = new XMLHttpRequest();
            ajax.open("get","delete.php?id="+id);
            ajax.send();
            ajax.onreadystatechange=function(){
                if(ajax.readyState==4 && ajax.status==200){
                    //alert(ajax.responseText);
                    //成功
                    if(ajax.responseText==1){

                        for(var i=0;i<ar.length;i++){
                            var tr=document.getElementById(ar[i]);
                            tr.remove();
                        }

                    }
                }
            }
        }
    }
</script>

delete.php

<?php
//接收传值
$id = $_GET[‘id‘];
//链接数据库
$link = mysqli_connect(‘127.0.0.1‘,‘root‘,‘root‘,‘mone‘);
//设置字符集
mysqli_query($link,‘set names utf8‘);
//拼接sql
$sql = "DELETE FROM user WHERE user_id in ($id)";
if(mysqli_query($link,$sql)){
    echo 1;
}else{
    echo 2;
}

原文地址:https://www.cnblogs.com/hopelooking/p/9215565.html

时间: 2024-10-29 19:50:06

ajax全选、全不选、反选、单删/批删的相关文章

jquery实现分页+单删批删

//定义一个分页的方法 public function fenye(){ //查询满足条件的总条数 $count = M("regis")->count(); //设置每页显示的条数 $length = 3; //求出总页数 $zong_page = ceil($count/$length); //接收一下当前页 $page = empty($_GET['page'])? 1 : $_GET['page']; //求出偏移量 $limit = ($page-1)*$length;

多选框checkbox全选全不选和反选

在判断多选框中的某一个是否被选中时,我们可以用checked的属性 选中了就返回true,没被选中就返回false; 这是html代码: <form action="#"> <label for="hobby">爱好:</label> <label for="hobby1"> <input type="checkbox" name="hobby" id=

jquery实现全选、不选、反选的两种方法

在取复选框checkbox的属性checked属性值时,发现一个问题,就是当用attr取值时,真的为"checked",假的为"undefined";当用prop取值时,真的为"true",假的为"false".经过网上参考一些资料,及根据官方的建议这两个用法:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr().   方法一

利用jQuery实现CheckBox全选/全不选/反选

转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3.1.js–>测试通过,jquery-1.5.1.js–>测试不通过. 实现CheckBox全选/全不选/反选代码如下: <%@ page language="java" pageEncoding="UTF-8"%>   <!DOCTYPE

【JS】全选、不选、反选复选框(模板)

今天和大家分享一个全选.不选.反选复选框的例子,这个例子可以当做是一个模板使用,只要把一些数据适当改变以下就OK啦. 这是效果图: 代码如下: HTML部分: <input type="button" value="全选"/ id="btn1"> <input type="button" value="不选"/ id="btn2"> <input type=

Jq 遍历 全选 全不选 反选

//全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked'); var fruit = $('input[name="check"]'); bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false); }); //反选 遍历checkbox 如果当前为选中 就设置为

(checkbox)全选/全不选/反选/选中显示

<!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-

checkbox全选/全不选/反选(jQuery v1.11.3测试通过)

主要功能: 方式一:使用三个按钮(全选.全不选 .反选)控制checkbox的选择.(实际可能全选/全不选共用按钮,这里没做) 方式二:使用一个主控checkbox用于控制其他checkbox的选择状态,同时受控checkbox是否全选也反馈给主控checkbox(这里有两种方式实现).   以下代码及实现效果在jQuery v1.11.3测试通过!2015/07/18! 测试效果:   代码: <!-- ---------------------------------------------

ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选

ExtJs实现复选框Checkboxgroup单勾选及跨控件全选 由于项目的需要,我们要将EXT的控件Checkboxgroup复选框组改造成但勾选,并且实现一个复选框组控制其他多个复选框组的全选,以下是关于如何实现的代码片段. 1.创建CheckboxGroup对象 1,新建空的EOS6.5的工程,新建com.towngas.tcis. gridlock构件包: 2,在com.towngas.tcis.gridlock构件包的"展现"节点下的"页面资源"节点中创建