文档章节

全选、反选、全不选功能块

高处胜寒
 高处胜寒
发布于 2018/01/18 10:54
字数 624
阅读 8
收藏 0
<?php
/**
 * Created by 小雨在线.
 * User: 飛天
 * Date: 2018/1/18 0018
 * Time: 09:55
 */

?>


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit"><!--用在360中-->
    <meta name="force-rendering" content="webkit"><!--用在其它-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>小雨在线-开发测试</title>


    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>


<div class="container">

    <div class="table-responsive" id="shoppingCart">

        <table class="table">

            <thead>
            <tr>
                <th>#</th>
                <th>课程</th>
                <th>单价</th>
                <th>加入时间</th>
                <th>操作</th>
            </tr>
            </thead>


            <tbody>


            <tr>
                <th scope="row"><label><input type="checkbox" name="shoppingId" value="50">&nbsp;50</label></th>
                <td>丰富的图形世界1</td>
                <td>50</td>
                <td>2018-01-18 10:26:29</td>
                <td>删除</td>
            </tr>


            <tr>
                <th scope="row"><label><input type="checkbox" name="shoppingId" value="50">&nbsp;50</label></th>
                <td>丰富的图形世界2</td>
                <td>50</td>
                <td>2018-01-18 11:26:29</td>
                <td>删除</td>
            </tr>


            </tbody>


        </table>

        <nav class="navbar navbar-default" style="height:50px;min-height: 50px;line-height: 50px;padding-left: 15px">


            <input type="checkbox" id="all">
            <input type="button" value="全选" class="btn btn-success" id="selectAll">
            <input type="button" value="全不选" class="btn btn-success hidden-sm hidden-xs" id="unSelect">
            <input type="button" value="反选" class="btn btn-success hidden-sm hidden-xs" id="reverse">
            &nbsp;&nbsp;
            <button type="button" class="btn btn btn-danger" id="shoppingDel">删除</button>

        </nav>

    </div>


</div>


<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://test.91xiaoyu.com/plus/layer/layer.js"></script>
<script src="./cartList/cart/js/all.js"></script>


<script>

    $(function () {
        // alert("1111111");

    });


</script>


</body>
</html>

 

/**
 * Created by 小雨在线 on 2016/1/19 0019.
 */

$(document).ready(function () {


    //全选或全不选
    $("#all").click(function () {
        if (this.checked) {
            $("#shoppingCart").find(":checkbox").prop("checked", true);
        } else {
            $("#shoppingCart").find(":checkbox").prop("checked", false);
        }
    });


    //  全选
    $("#selectAll").click(function () {
        $("#shoppingCart :checkbox,#all").prop("checked", true);
    });


    //全不选
    $("#unSelect").click(function () {
        $("#shoppingCart :checkbox,#all").prop("checked", false);
    });


    //反选
    $("#reverse").click(function () {
        $("#shoppingCart").find(":checkbox").each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });
    });


    $("#shoppingDel").click(function () {
        var valArr = [];
        $('input[name="shoppingId"]:checked').each(function (i) {
            valArr[i] = $(this).val();
        });
        var vals = valArr.join(',');//数组转换以逗号隔开的字符串

        if (valArr.length === 0) {
            layer.msg('请先选择操作对象!');
            return false;

        } else {

            layer.confirm('你确定要删除么?', {
                time: 0 //不自动关闭
                ,
                resize: false,
                btn: ['确定', '取消']
                , yes: function (index) {
                    layer.close(index);

                    console.log(vals);

                    //-------------------
                    $.ajax({

                        //提交数据的类型 POST GET
                        type: "POST",

                        //提交的网址
                        url: "./cartList/cart/do/doShoppingCart.php",

                        //提交的数据
                        data: {'do': 'shoppingDel', 'kid': vals},

                        //返回数据的格式 "xml","html","script","json","jsonp","text"
                        datatype: "json",

                        //在请求之前调用的函数
                        beforeSend: function () {

                            //todo
                            //加载层-风格4
                            layer.msg('删除中...', {
                                icon: 16
                                , shade: 0.01
                            });

                        },

                        //成功返回之后调用的函数
                        success: function (dodata) {
                            //todo
                            var jsondata = eval('(' + dodata + ')');

                            if (jsondata.status == "ok") {
                                layer.msg(jsondata.mess, {
                                    icon: 1,
                                    time: 2000 //3s后自动关闭
                                }, function () {
                                    location.reload();

                                });

                            } else {
                                layer.msg(jsondata.mess, {
                                    time: 3000 //5s后自动关闭
                                });
                            }
                        }


                    });
                    //---------------


                }
            });


        }

    });

});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

© 著作权归作者所有

高处胜寒

高处胜寒

粉丝 9
博文 213
码字总数 148499
作品 0
西安
程序员
私信 提问
jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)

ylbtech-jQuery:jQuery学习 jQuery语法实例 复选框应用 效果截图 jQuery:1.5.1,复选框应用(全选,全不选,反选,提交选中的值,全选/全不选)HTML代码返回顶部 $("#checkedAll").click(funct...

吞吞吐吐的
2017/11/08
0
0
JavaScript 基础--- (经典案例)

案例一:全选练习 ** 使用复选框上面一个属性判断是否选中 - checked属性 - checked=true:选中 - checked=false:不选中 创建一个页面 * 复选框和按钮 - 四个复选框表示爱好 - 还有一个复选...

姜白告
2018/08/01
0
0
單選,多選操作

js获取单选框、复选框的值及操作 前天昨天今天明天后天提交 前年去年今年明年后年提交全选反选全不选

十月的星空
2014/05/27
15
0
JQuery(学习笔记六)JQuery常用实例

几个简单例子的实现 (一)表格隔行变色 效果: (2)多Tab点击切换 效果: 三、导航动态显示效果 效果: 四、爱好选择器 效果: 五、添加删除记录 六、焦点轮播图 效果:

一枝韩独秀
2018/09/07
0
0
微信小程序实现购物车页面

设计思路: 一、从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二、点击复选框toggle操作 如已经选中的,经...

Jansens
2016/10/25
139
0

没有更多内容

加载失败,请刷新页面

加载更多

Redis集群搭建

服务器资源 ip 账号 配置 操作系统 xxx.70 root/xxx 磁盘50G(/)+150G(/home)、内存16G、CPU 16core CentOS Linux release 7.2.1511 (Core) xxx.74 root/xxx 磁盘50G(/)+150G(/home)、......

jxlgzwh
29分钟前
4
0
avro

一、 ```我们已经接触过很多序列化框架(或者集成系统),比如protobuf、hessian、thrift等,它们各有优缺点以及各自的实用场景,Avro也是一个序列化框架,它的设计思想、编程模式都和thi...

hexiaoming123
31分钟前
5
0
QML TextInput的字体超出控件范围

本文链接:https://blog.csdn.net/chyuanrufeng/article/details/54691998 问题描述 :QML TextInput输入内容超过TextInput的大小 当输入过多的字符串时,会出现内容超过TextInput的大小,字...

shzwork
32分钟前
4
0
《Java 8 in Action》Chapter 10:用Optional取代null

1965年,英国一位名为Tony Hoare的计算机科学家在设计ALGOL W语言时提出了null引用的想法。ALGOL W是第一批在堆上分配记录的类型语言之一。Hoare选择null引用这种方式,“只是因为这种方法实...

HelloDeveloper
33分钟前
4
0
进击的 Java ,云原生时代的蜕变

作者| 易立 阿里云资深技术专家<br /> <br />导读:云原生时代的来临,与Java 开发者到底有什么联系?有人说,云原生压根不是为了 Java 存在的。然而,本文的作者却认为云原生时代,Java 依然...

阿里巴巴云原生
35分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部