html,javaScript中怎么控制复选框checkbox的全选，全不选，以及全选中，全选按钮选中，其中一个或者多个没选，则全选按钮不被选中

最新推荐文章于 2021-07-07 20:09:23 发布

老司儿

最新推荐文章于 2021-07-07 20:09:23 发布

阅读量954

点赞数

本文介绍了一个使用Java Web技术实现的批量操作案例，包括批量删除功能的实现方法及表格数据展示。通过JavaScript实现了全选与单选的联动效果，并提供了查询、添加和批量删除等操作。

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/commons/jsp/htmtag.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script>
//当全选按钮，选中时，所有复选框被选中，当全选按钮不被选中时，所有的也不被选中
function funSelAll(){
var selects=document.getElementsByName("selOne");
if(document.getElementsByName("selAll")[0].checked==true){
for(var i=0;i<selects.length;i++){
selects[i].checked=true;
}
}else{
for(var i=0;i<selects.length;i++){
selects[i].checked=false;
}
}
}
//当所有的复选框被选中时，全选按钮被选中，当其中任意一个或者多个没被选中时，全选按钮不被选中
function funSelOne(){
var one=document.getElementsByName("selOne");
var all=document.getElementsByName("selAll")[0]
var selCount=0;
var unSelCount=0;
for(var i=0;i<one.length;i++){
if(one[i].checked==true){
selCount++;
}
if(one[i].checked==false){
unSelCount++;
}
if(selCount==one.length){
all.checked=true;
}
if(unSelCount>0){
all.checked=false;
}
}
}
function funDelBatch(){
var strsValue="";
var strs=document.getElementsByName("selOne");
if(strs!=null&&strs.length>0){
for(var i=0;i<strs.length;i++){
//----
if(strs[i].checked==true){
strsValue=strsValue+strs[i].value+",";
}
//---
}
}
document.form1.action="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDetailGradeBatch&gradeIds="+strsValue;
document.form1.submit();
}
</script>
</head>
<body>
<form action="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDetailGradeByName" method="post" id="form1" name="form1">
<div align="center">
<input type="text" name="gradeName" value="${gradeName}">
<input type="submit" value="查询">
<input type="reset" value="重置">
<br/>
<br/>
<input type="button" value="添加" onClick="window.open('http://localhost:8080/demo/jsp/grade/gradeAdd.jsp');">
<input type="button" value="批量删除" onClick="funDelBatch()">
</div>
<table border="1px" align="center" border="1" cellpadding="2" cellspacing="0" bordercolorlight="#000000" bordercolordark="#FFFFFF" bgcolor="#FFFFEE">
<c:if test="${not empty '${volists}'}">
<tr>
<td><input type="checkbox" name="selAll" onClick="funSelAll(this)"></td>
<td>班级编码</td>
<td>班级名称</td>
<td>操作</td>
</tr>
<c:forEach items="${volists}" var="vo">
<tr>
<td><input type="checkbox" name="selOne" value="${vo.gradeId}" onClick="funSelOne(this)"></td>
<td>${vo.gradeId}</td>
<td>${vo.gradeName}</td>
<td>
<a href="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDeleteGrade&gradeId=${vo.gradeId}">删除</a>
<a href="<%=request.getContextPath()%>/grade/allGrades.htm?method=toDetailGrade&gradeId=${vo.gradeId}">修改</a>
</td>
</tr>
</c:forEach>
</c:if>
</table>
</form>
</body>
</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。