一开始做全选功能的时候,一片茫然,参考别人的代码,发现可以在jsp中实现全选,并且数据的获取和发送,非常不错,分享一下,这是最后的功能截图:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'logisticsCompany.jsp' starting page</title>
<script src="js/jquery.js"></script>
<script type="text/javascript">
// 全选
function allCheck() {
var chkList = document.getElementsByName("chkID");
if (document.getElementById("chkAll").checked) {
for (var i = 0; i < chkList.length; i++) {
chkList[i].checked = true;
}
}else {
for(var i = 0; i < chkList.length; i++) {
chkList[i].checked = false;
}
}
}
//保存
function save(){
var str = "";
var chkList = document.getElementsByName("chkID");
for (var i = 0; i < chkList.length; i++) {
if (chkList[i].checked) {
str+=chkList[i].value+",";
}
}
$("#str").val(str);
//document.getElementById("str").value=str;
//$("#myform").submit();
document.forms[0].action="logisticsCompanyAction_addLogisticsCompany"
document.forms[0].submit();
}
//初始化页面时,是否选中该checkbox
function isCheck(){
var chkList=document.getElementsByName("chkID");
var chkedList = document.getElementsByName("chkedID");
for(var i=0;i<chkedList.length;i++){
$("input:checkbox[value='"+chkedList[i].value+"']").attr('checked','true');
}
}
</script>
</head>
<body class="skin-blue" style="min-height: 500px;" οnlοad="isCheck();">
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
物流公司
</h1>
<ol class="breadcrumb breadcrumb-primary"></ol>
</section>
<div class="form-group">
<label class="col-sm-2 control-label">
选择物流:
</label>
<a href="logisticsCompanyAction_addLogisticsCompany"></a>
<form action="logisticsCompanyAction_addLogisticsCompany" method="post" id="myform">
<div class="col-sm-10">
<ul class="list-unstyled">
<li>
<label class="checkbox-inline">
<input id="chkAll" class="check-all" type="checkbox" οnclick="allCheck();">
全选
</label>
</li>
<li>
<s:iterator value="logisticsCompanyDto">
<input type="checkbox" name="chkID" id="checkID" value="<s:property value="corpId"/>">
<s:property value="corpName"/>
</s:iterator>
</li>
</ul>
<ul id="ul_logisticsCompany" style="display:none">
<s:iterator value="logisticsCompany">
<input type="checkbox" name="chkedID" id="checkedID" value="<s:property value="corpComId"/>">
</s:iterator>
</ul>
</div>
<ul>
<button type="button" οnclick="save()">
保存
</button>
</ul>
<input type="hidden" id="str" name="str" value="" />
</form>
</div>
</body>
</html>