您的位置：首页 > Web前端 > JavaScript

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

2017-11-29 19:21 756 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航