HTML页面

  1. <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    <center>
        <table>
            <tr>
                <th><input type="checkbox" class="che"></th>
                <th>ID</th>
                <th>用户名</th>
                <th>分类</th>
                <th>编辑</th>
            </tr>
            {volist name="data" id="v"}
            <tr id="{$v.id}">
                <td><input type="checkbox" class="check" value="{$v.id}" name=bb></td>
                <td>{$v.id}</td>
                <td>{$v.biao}</td>
                <td>{$v.fen}</td>
                <td><a href="javascript:void (0);" class="shan">删除</a></td>
            </tr>
            {/volist}
        </table>
        <button class="pi_shan">批量删除</button>
        <button class="quan">全选</button>
        <button class="quanbu">全不选</button>
    </center>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script>
        //批删
        $(document).on("click",".pi_shan",function () {
            bb=document.getElementsByName("bb");
            str="";
            for (var i=0;i<bb.length;i++)
            {
                if(bb[i].checked==true)
                {
                    str+=","+bb[i].value
                }
            }
            str=str.substr(1);
            //请求
            $.post(
                "{:url('index/pi_del')}",
                {
                    id:str
                },
                function (data) {
                     if(data==1)
                     {
                         alert("批删成功");
                         location.href="{:url('index/show')}"
                     }else if(data==2)
                     {
                         alert("批删失败");
                     }
                }
            )
        })
        //全选
        $(document).on("click",".quan",function () {
            $(".check").prop("checked",true);
        })
        //反选
        $(document).on("click",".quanbu",function () {
            $(".check").prop("checked",false);
        })
        //反选
        $(document).on("click",".che",function () {
            $(".check").each(function () {
                this.checked=!this.checked;
            })
        })
        //单删
    $(document).on("click",".shan",function () {
        var id=$(this).parents("tr").attr("id");
        //请求
        $.post(
            "{:url('index/dan_shan')}",
            {
                id:id
            },function (data) {
                if(data==1)
                {
                    document.getElementById(id).remove()
                }
            }
        )
    })
    </script>
    </body>
    </html>
  2.  
  3. PHP页面
  1. <?php
    namespace app\index\controller;
  2.  
  3. use think\Controller;
    use think\Db;
    use think\Request;
  4.  
  5. class Index extends Controller
    {
        public function index()
        {
            return '<style type="text/css">*{ padding: 0; margin: 0; } .think_default_text{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:)</h1><p> ThinkPHP V5<br/><span style="font-size:30px">十年磨一剑 - 为API开发设计的高性能框架</span></p><span style="font-size:22px;">[ V5.0 版本由 <a href="http://www.qiniu.com" target="qiniu">七牛云</a> 独家赞助发布 ]</span></div><script type="text/javascript" src="https://tajs.qq.com/stats?sId=9347272" charset="UTF-8"></script><script type="text/javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ad_bd568ce7058a1091"></think>';
        }
        //展示页面
        public function show()
        {
            $data=Db::table("title")->select();
            return view("show",['data'=>$data]);
        }
        //单删
        public function dan_shan()
        {
            $id=Request::instance()->param("id");
            $a=Db::table("title")->where("id=$id")->delete();
            if($a)
            {
                return 1;
            }else{
                return 2;
            }
        }
        //批删
        public function pi_del()
        {
            $id=Request::instance()->param("id");
            $aa=explode(",",$id);
            $a=Db::table("title")->delete($aa);
            if($a)
            {
                return 1;
            }else{
                return 2;
            }
        }
    }
  1.  

jquery中的全选、反选、全不选和单删、批删的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

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

    <meta charset="utf-8"> <?php //链接数据库 $link = mysqli_connect('127.0.0.1','root','r ...

  3. 【HTML5】页面点击按钮添加一行 删除一行 全选 反选 全不选

    页面点击按钮添加一行    删除一行   全选   反选  全不选 页面效果图如下 html页面代码 <!DOCTYPE html> <html> <head> & ...

  4. 表单Checkbox全选反选全不选

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue实现单选多选反选全选全不选

    单选 当我们用v-for渲染一组数据的时候,我们可以带上index以便区分他们我们这里利用这个index来简单地实现单选 <li v-for="(item,index) in radi ...

  6. checkbook全选/反选/全不选

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  7. Jquery中对checkbox的各种“全选”或者“取消”功能实现（特别注意1.6+的一定不能使用attr来取属性了！用prop！）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. html js 全选 反选 全不选源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  9. WPF DataGrid CheckBox 多选 反选 全选

    效果图 实现此效果的必要关键是 Style+DataTemplate 关键代码: <Window.Resources> <DataTemplate x:Key="Check ...

  10. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

随机推荐

  1. Ajax详细剖析

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 传统的Web应用 一个简单操作需要重新 ...

  2. 轻重搭配|计蒜客2019蓝桥杯省赛 B 组模拟赛（一）

    样例输入: 6 1 9 7 3 5 5 样例输出: 4 思路:贪心,选错贪心思路,只能过一小部分数据,正确贪心思路:从前一半遍历,在后一半中找到比当前元素的两倍大的数(因为这里指针不会后移,所以可以采 ...

  3. BZOJ2956: 模积和

    Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j<=m,i≠j. Input 第一行两个数n,m. Output 一个整数表 ...

  4. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  5. Druid介绍

    Druid (大数据实时统计分析数据存储) Druid 是一个为在大数据集之上做实时统计分析而设计的开源数据存储.这个系统集合了一个面向列存储的层,一个分布式.shared-nothing的架构,和一 ...

  6. java.lang.NoClassDefFoundError: com/gexin/rp/sdk/exceptions/RequestException解决方法

    本文为博主原创,未经允许不得转载: 最近在开发个推的时候遇到的问题,当我在maven仓库中下载个推的jar包时,下载不下来,索性在项目中Configue build Path,将jar下载到本地 手动 ...

  7. centos7 修改密码

    Centos7破解密码的方法   Centos7忘记密码   在工作或者自己练习的时候我们难免会大意忘掉自己的root密码,有些同学忘掉密码竟然第一选择是重装系统,工作中可万万使不得! 本篇博客将讲解 ...

  8. Log4j日志依赖

    <!-- https://mvnrepository.com/artifact/log4j/log4j --><dependency> <groupId>log4j ...

  9. bash：command not found解决方法

    先用:echo $PATH 查看path是否含有:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin如果没有先用临时环境变量(重启 ...

  10. ImgQuoteUIWindow

    using System;using UnityEngine;using UnityEngine.UI;using UnityEditor;using System.Collections;using ...