• 全选demo


    我们处理数据时,最好能够支持全选操作。

    选中之后,进行删除,或其他处理。

    我自己写了一个demo。

    主要功能:

    1.点击全部选中

    2.点击全部取消

    3.然后进行获取选中的id,进行处理

    代码如下:

    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head>
    <script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="./css/demo.css">
    <script type="text/javascript">
        $(document).ready(function(){
            //单击全选
            $("#checkall").click(function(){
                if($(this).attr("checked")){
                    $("input[name='mailid']").attr("checked", true);
                }else{
                    $("input[name='mailid']").attr("checked", false);
                }
            });
    
            //删除
            $("#quick_del").click(function(){
                var arrMailid = new Array();
                $("input[name='mailid']").each(function(i){
                    if($(this).attr("checked")){
                        arrMailid.push($(this).val());//添加到数组中
                    }
                });
                strMailid = arrMailid.join("-");
                //alert(arrMailid instanceof Array);//判断是否为数组格式
                del(strMailid);
            });
        });
        //删除,只进行处理,不参与元素争端
        function del(mailid){
            //或者ajax处理
            //或者跳转处理
        }
        
    </script>
    </head>
    <input type="checkbox" name="checkall" id="checkall" title="选中/取消选中"><br>
    <input type="checkbox" name="mailid" value="1">1<br>
    <input type="checkbox" name="mailid" value="2">2<br>
    <input type="checkbox" name="mailid" value="3">3<br>
    <input type="checkbox" name="mailid" value="4">4<br>
    <input type="checkbox" name="mailid" value="5">5<br>
    
    
    <a class="btn_gray btn_space" hidefocus="" id="setAllReaded" onclick="getTop();" href="javascript:;">全部标为已读</a>
    
    <a class="btn_gray btn_space" hidefocus="" id="quick_del"  href="javascript:;" name="del">删除</a>
    
    </html>

    相关的css代码:

    .btn_gray{
    border: 1px solid #888;
    color: #000000;
    color: #000000!important;
    background: #F3F3F3;
    background: -moz-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
    background: -webkit-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
    background: -o-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
    background: -ms-linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',endColorstr='#d7d7d7',GradientType=0 );
    background: linear-gradient(top,#ffffff 0%,#ebebeb 90%,#F3F3F3 100%);
    }
    
    .btn_space {
    margin-right: 3px;
    }
    
    a:hover {
    text-decoration: underline;
    }
    
    body {
    font-family: "lucida Grande",Verdana;
    font-size: 12px;
    }

    这里是把a标签处理成按钮的样式的写法。

  • 相关阅读:
    Qwt的安装与使用
    深入浅出分析Linux设备驱动程序中断
    QT连接数据库的基本操作
    linux下摄像头抓图源码
    QTE 触控屏支持
    linux网络多线程编程实例
    wubi (windows下硬盘安装Linux)
    快速体验Linux的3种方式
    在Visual Studio 2005中安装Qt 4.3.2
    Enterprise Architect 字体
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/3473159.html
Copyright © 2020-2023  润新知