html table中嵌入checkbox实现全选

最新推荐文章于 2021-06-04 19:33:31 发布

原创最新推荐文章于 2021-06-04 19:33:31 发布 · 1.3w 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #table #import #string #exception #function

servlet/jsp 专栏收录该内容

4 篇文章

订阅专栏

这篇博客展示了如何在HTML表格中使用Checkbox实现全选和反选功能。通过JavaScript函数doallcheck()和doclickcheck()，可以控制全选按钮与各个Checkbox的状态。同时，还涉及到后台Java代码，用于从数据库中获取数据并更新记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@page import="com.smg.domain.OrderDetail"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@page import="java.sql.PreparedStatement"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.Statement" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	Connection ct = null;
	PreparedStatement ps = null;
	ResultSet rs = null;
	String DRIVER = "com.mysql.jdbc.Driver";
	String URL = "jdbc:mysql://localhost:3306/smg";
	String USERNAME = "root";
	String PASSWD = "root";
	
	List<OrderDetail> orderDetailList = new ArrayList<OrderDetail>(); 
	String doflag  = request.getParameter("doflag");
	if(doflag==null||doflag.length()==0) {
		try {
			Class.forName(DRIVER);
			ct = DriverManager.getConnection(URL, USERNAME, PASSWD);
			
			String orderIds = request.getParameter("orderIds");
			if(null != orderIds && !orderIds.isEmpty()) {
	System.out.println(orderIds.length());
	System.out.println(orderIds);
				StringBuilder sb = new StringBuilder();
				String str = "(";
				for(int i=0;i<orderIds.length();i++) {
					if(',' != orderIds.charAt(i)) {
						sb.append(orderIds.charAt(i));
						if(i == orderIds.length() - 1) {
							str = str + "'"+sb+"'";
						}
					} else {
						str = str + "'"+sb+"'" + ",";
						sb = new StringBuilder();
					}
				}
				str = str + ")";
	System.out.println(str);
				//查出所有orderId对应的列 表
				String sql = "select * from ordDetail where orderId in " +str;
				ps = ct.prepareStatement(sql);
				rs = ps.executeQuery();
				while(rs.next()) {
					OrderDetail orderDetail = new OrderDetail();
					orderDetail.setId(rs.getInt("id"));
					orderDetail.setOrderId(rs.getString("orderId"));
					orderDetail.setName(rs.getString("name"));
					orderDetail.setAddress(rs.getString("address"));
					orderDetail.setFlag(rs.getInt("flag"));
					orderDetailList.add(orderDetail);
				}
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			
		}
	} else if("update".equals(doflag)) {
		try {
			Class.forName(DRIVER);
			ct = DriverManager.getConnection(URL, USERNAME, PASSWD);
			
			//根据获取的flag判断是否提交并获取提交的checkbox
			String ids[] = request.getParameterValues("mycheckbox");
			//拼接sql语句
			StringBuilder sb = new StringBuilder();
			String str = "";
			if(null !=  ids && ids.length != 0) {
				sb.append("(");
				for(String id : ids) {
					sb.append("'"+id+"'");
					sb.append(",");
				}
				str = sb.substring(0,sb.length()-1).toString();
				str = str + ")";
				//根据id更新数据
				String sqlStr = "update ordDetail set flag = 1 - flag where id in "+str;
	System.out.println(sqlStr);
				ps = ct.prepareStatement(sqlStr);
				ps.execute(); 
				
				request.setAttribute("resultflag", "save" );
			}
		} catch(Exception e) {
			request.setAttribute("resultflag", "error");
			e.printStackTrace();
		}
	}
	
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<base target="_self">
<script type="text/javascript">
function onload(){
    var flag = '<%=request.getAttribute("resultflag")%>';
    alert(flag);
    if(flag == 'error')
    {
  	  window.returnValue=flag;
  	  window.close();
    }
    else if (flag == 'save')
    {
  	  window.returnValue=flag;
  	  window.close();
    }
  
}

function onsubmit(){
	 //document.getElementById("save").doflag.value='save';
	 document.getElementById("save").submit();
	 return false;
}

function oncancel(){
	window.returnValue="cancel";
	window.close();
}

//全选
function doallcheck(){  
    var allche = document.getElementById("allid");  
    var che = document.getElementsByName("mycheckbox");  
    if(allche.checked == true){  
        for(var i=0;i<che.length;i++){  
            che[i].checked="checked";  
        }  
    }else{  
        for(var i=0;i<che.length;i++){  
            che[i].checked=false;  
        }  
    }  
}  

function doclickcheck(obj) {
	if(obj.checked==false){  
        var allche = document.getElementById("allid");  
        allche.checked = false;
    }
}
</script>

</head>
<body onload="onload()">
<center>
 	<h2>我的订单</h2>
  	<form action="ordervideo.jsp" method="post" name="save">
  		<table width="90%" border="1" cellspacing="0" cellpadding="1">
  			<tr>
  				<th><input type="checkbox" id="allid" onclick="doallcheck()"></th>
  				<th>orderId</th>
  				<th>name</th>
  				<th>address</th>
  			</tr>
  			<%
  			if(null != orderDetailList && orderDetailList.size() != 0) {
				for(OrderDetail orderDetail : orderDetailList) {
					%>
					<tr align="center">
						<%
							if(orderDetail.getFlag() == 1) {
								%>
									<td><input type="checkbox" name="mycheckbox" onclick="doclickcheck(this)" checked="checked" value="<%=orderDetail.getId() %>"></td>
								<%
							} else if(orderDetail.getFlag() == 0) {
								%>
									<td><input type="checkbox" name="mycheckbox" onclick="doclickcheck(this)" value="<%=orderDetail.getId() %>"></td>
								<%
							}
						%>
  						<td><%=orderDetail.getOrderId() %></td>
  						<td><%=orderDetail.getName() %></td>
  						<td><%=orderDetail.getAddress() %></td>
  					</tr>
					<%
				}
			}
  			%>
			<tr>
				<td colspan="5" align="right"><input type="submit" value="ok"/>
				<input type="button" value="cancel" onclick="oncancel()" />
				
				<input type="hidden" name="doflag" value="update"/>
			</tr>		
  		</table>
  	</form>
</center>
</body>
</html>