html,javaScript中怎么控制復選框checkbox的全選,全不選,以及全選中,全選按鈕選中,其中一個或者多個沒選,則全選按鈕不被選中


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM