• 全选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标签处理成按钮的样式的写法。

  • 相关阅读:
    什么是socket ??
    WebView的使用
    UIWebView 使用
    UIWebView与JavaScript的交互
    iOS中UIWebView使用JS交互
    iOS app支付宝接口调用的一点总结(补充支付宝SDK&Demo下载地址)
    51单片机 按键,键盘检测
    51单片机 数码管的显示与译码器
    C51数据类型扩充定义
    STC12C5A60S2 内部AD+1602显示
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/3473159.html
Copyright © 2020-2023  润新知