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

posted @ 2013-12-13 15:20  TBHacker  阅读(275)  评论(0)  编辑  收藏  举报