Jquery实现全选和反选
简介
我们在开发的过程中一定对全选和反选很熟悉，这些功能都是伴随着我们的开发的道路上的，我们点击一个按钮就能实现对当前页的所有的数据进行全部选中或者取相反的数据的作用，我相信大家有很多的做法，每个人都认为自己的做法是最简单的做法，下面我也将给大家引入我自己的做法，希望给大家有所帮助
需求分析
1.从后台数据库中读出数据存到域对象中传到前台
2.数据从域对象中通过jstl加上el表达式遍历出来显式在前台上
3.显然全选就是比较容易的，所有的选择框的id=“id”,故可以使用Jquery的元素选择器，故给其所有的id的框都添加一个默认的selected属性，实现了全选的作用
4.反选按钮就是遍历所有的选项，然后遍历每一个对象判断取其每一个当前对象的相反的相反值
详细代码
<%@ page language="java" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>客户信息管理</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/skin/css/base.css">
<script type="application/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
</head>
<body leftmargin="8" topmargin="8" background='skin/images/allbg.gif'>
<!-- 内容列表 -->
<form id="form2" method="post" action="${pageContext.request.contextPath}/cus/mutidel">
<table id="infotb" width="98%" border="0" cellpadding="2" cellspacing="1" bgcolor="#D1DDAA" align="center" style="margin-top:8px">
<tr bgcolor="#E7E7E7" >
<td height="24" colspan="12" background="skin/images/tbg.gif"> 需求列表 </td>
</tr>
<tr align="center" bgcolor="#FAFAF1" height="22" id="tr2">
<td width="4%">选择</td>
<td width="6%">序号</td>
<td width="10%">联系人</td>
<td width="10%">公司名称</td>
<td width="8%">添加时间</td>
<td width="8%">联系电话</td>
<td width="10%">操作</td>
</tr>
<c:forEach items="${info.list}" var="cus" varStatus="cou">
<tr align='center' bgcolor="#FFFFFF" onMouseMove="javascript:this.bgColor='#FCFDEE';" onMouseOut="javascript:this.bgColor='#FFFFFF';" height="22" >
<td><input name="id" type="checkbox" value="${cus.id}"></td>
<td>${cou.count}</td>
<td>${cus.companyperson}</td>
<td align="center">${cus.comname}</td>
<td>${cus.addtime}</td>
<td>${cus.comphone}</td>
<td><a href="${pageContext.request.contextPath}/cus/SelectAndShowCus?id=${cus.id}">编辑</a> | <a href="${pageContext.request.contextPath}/cus/showCus?id=${cus.id}">查看详情</a></td>
</tr>
</c:forEach>
<%--下面是其相对应的操作--%>
<tr bgcolor="#FAFAF1">
<td height="28" colspan="12">
<a href="javascript:;" id = checkAll class="coolbg">全选</a>
<a href="javascript:;" id = checkRev class="coolbg">反选</a>
<a href="javascript:;" onclick="delSelected()" class="coolbg"> 删除选中</a>
<a href="javascript:;" onclick="expro()" class="coolbg"> 导出Excel </a>
</td>
</tr>
<tr align="right" bgcolor="#EEF4EA">
<td height="36" colspan="12" align="center"><!--翻页代码 --></td>
</tr>
</table>
</form>
<script type="application/javascript">
/*删除选中的数据*/
function delSelected() {
//判断是否有选中的数据
var length = $("input[name=id]:checked").length;
if (length > 0){
//提交表单
$("#form2").submit();
}else {
alert("请输入你想删除的数据")
}
}
/*利用Jquery实现全选和反选*/
$(function () {
//全选功能
$("#checkAll").click(function () {
$("input[name=id]").prop("checked",true);
})
//反选功能,先循环遍历所有的选项,然后对每一个对象判断其返回值,然后依次取反
$("#checkRev").click(function () {
$("input[name=id]").each(function () {
//返回当前的对象,依次对每一个对象依次取反
var flag = $(this).prop("checked");
$(this).prop("checked",!flag);
})
})
});
//导出我们选中的数据到excal表格中去
function expro() {
$("#form2").attr("action","cus/expro");
$("#form2").submit();
}
</script>
</body>
</html>
细节分析
