jQuery实现复选框的全选和反选:
截图如下:
代码如下:
index.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>列表框的综合应用</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">$(function(){$("#checkAll").click(function(){$('[name=checkbox]:checkbox').attr("checked",true);});$("#checkNO").click(function(){$('[name=checkbox]:checkbox').attr("checked",false);});});
</script>
</head><body>
<table border="0" cellpadding="0" cellspacing="0"><tr><td><div align="left"><p><input type="checkbox" name="checkbox" value="checkbox"/>上网<input type="checkbox" name="checkbox" value="checkbox"/>旅游<input type="checkbox" name="checkbox" value="checkbox"/>交友<input type="checkbox" name="checkbox" value="checkbox"/>逛街<input type="checkbox" name="checkbox" value="checkbox"/>逛街</p><p><input type="checkbox" name="checkbox" value="checkbox"/>看书<input type="checkbox" name="checkbox" value="checkbox"/>书法<input type="checkbox" name="checkbox" value="checkbox"/>游戏<input type="checkbox" name="checkbox" value="checkbox"/>球类</p><p align="right"><input type="button" name="Submit" id="checkAll" value="全选"/><input type="button" name="Submit2" id="checkNO" value="全不选"/></p></div></td></tr>
</table>
</body>
</html>