我们处理数据时，最好能够支持全选操作。
选中之后，进行删除，或其他处理。
我自己写了一个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标签处理成按钮的样式的写法。