jsp中点击一个多选框，实现全选或全不选

当点击页面表头的多选框，则每一行的多选框都会被选中或释放，实现了全选。JSP页面的代码中还实现了多选删除。其实全选也是为了实现多项选择然后删除。多选删除提交的时候用的是超链接提交表单，它的功能就是可以提交表单中没有的值。

js代码

<script type="text/javascript">
function checkt(){
var checkAll=document.getElementById("checkAll");
console.log(checkAll);
checkAll.value==1 ? checkAll.value=2 : checkAll.value=1;
var uids=document.getElementsByName("uid");

for(var i=0;i<uids.length;i++){
if(checkAll.value==1){
uids[i].checked=false;//全不选
}else{
uids[i].checked=true;//全不选
}
}
}

</script>

jQuery代码

<script type="text/javascript">
//live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
$("#checkAll").live("click",function(){
//返回属性的值：$(selector).prop(property)
if($("#checkAll").prop("checked")){
//attr() 方法设置或返回被选元素的属性值。   这里用class选择器因为有多个选择框
$(".uid").attr("checked",true);
}else{
$(".uid").attr("checked",false);
}
});
</script>

jsp页面中的代码

<form name="myform" id="f2" method="post">
<table class="table">
<tr class="table_header">
<td align="center"><input type="checkbox" name="checkAll" id="checkAll" value="1" οnclick="checkt()"></td>
<td>序号</td>
<td>账号</td>
<td>昵称</td>
<td>Email</td>
<td>性别</td>
<td>家庭住址</td>
<td>头像</td>
<td>操作</td>
</tr>

<%
List<User> list=(List<User>)request.getAttribute("userList");
if(list!=null){
for(int i=0 ; i<list.size();i++){
User user=list.get(i);

%>
<tr class="row<%=((i+1)%2==0?2:1) %>">
<td align="center"><input  type="checkbox"  class="uid"name="uid" value="<%=user.getUid()%>"></td>
<td><%=i+1 %></td>
<td><%=user.getAccount() %></td>
<td><%=user.getName() %></td>
<td><%=user.getEmail() %></td>
<td><%=(user.getSex()!=null?(user.getSex().equals("0")?"男":"女"):"") %></td>
<td><%=(user.getProvince()==null?"":user.getProvince())+(user.getCity()==null?"":user.getCity())+(user.getCounty()==null?"":user.getCounty())%></td>
<td><%=(user.getPicture()==null?"":user.getPicture()) %></td>

<td><a id="mydel"
href="DeleteUserServlet?uid=<%=user.getUid()%>"
οnclick="return confirm('确定要删除吗?')">删除</a>

</tr>
<%
}
}
%>
</table>

<div id="mydiv">
<span id="myspan" >
   <a id="mydel" href="javascript:myform.action='DeleteUserServlet';myform.submit()"
οnclick="return confirm('确定要删除吗?')">删除所选</a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="     ">生成EXCEL</a>&nbsp;&nbsp;&nbsp;&nbsp;
   <a href="ToBookSelectServlet?type=1&curpage=">首页</a>&nbsp;
   <a href="ToBookSelectServlet?type=2&curpage=">上一页</a>&nbsp;
   <a href="ToBookSelectServlet?type=3&curpage=">下一页</a>&nbsp;
   <a href="ToBookSelectServlet?type=4&curpage=">末页</a>&nbsp;   
</span>
</div>
</form>