码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2016-03-31 18:50:31      阅读:510      评论:0      收藏:0      [点我收藏+]

标签:

<%@ 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>
<!--toDetailGradeByName-->
<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>

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

标签:

原文地址:http://www.cnblogs.com/liuhai35/p/5341895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!