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">&nbsp;需求列表&nbsp;</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">&nbsp;<a href="javascript:;" id = checkAll class="coolbg">全选</a><a href="javascript:;" id = checkRev class="coolbg">反选</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:;" onclick="delSelected()" class="coolbg">&nbsp;删除选中</a><a href="javascript:;" onclick="expro()" class="coolbg">&nbsp;导出Excel&nbsp;</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>

细节分析

Jquery实现全选和反选相关推荐

jquery datatable 全选，反选参考文档
1 版本号 DataTables 1.10.12 2 API文档地址 http://datatables.club/reference/option/ 官方option http://datatabl ...
运用JQuery实现全选，和取消的操作
运用JQuery实现全选,反选和取消的操作代码展示: <!doctype html> <html lang="en"><head><ti ...
js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
jquery的全选，全不选，反选
jquery的全选,全不选,反选: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=&q ...
【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
Jquery实现全选反选
Jquery实现全选反选 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
Jquery 全选、反选问题解析
最近工作中,需要使用Jquery实现复选框的全选和反选,本人虽然不是专职撸前端的,但这个小问题感觉也没什么难度,下面直接上代码: <div id="list"> < ...
jquery +做CheckBoxList全选，反选
以前我们做CheckBoxList全选,反选,一般用Aspx+CodeFile.或者用JavaScript 现在我们可以用JQuery来帮我Easy Choose. 这里我来写三种: 第一种全选 $ ...
jQuery实现复选框的全选和反选：
jQuery实现复选框的全选和反选: 截图如下: 代码如下: index.jsp: <%@ page language="java" import="java.ut ...

Jquery实现全选和反选

Jquery实现全选和反选

Jquery实现全选和反选相关推荐

最新文章

热门文章