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

原创
2018/01/18 10:54
阅读数 40
<?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后自动关闭
                                });
                            }
                        }


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


                }
            });


        }

    });

});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部