zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    攻防世界web新手区前六关
    JS-数组基础知识3
    CSRF攻击的原理和spring security对CSRF攻击的解决方法
    Java开发微信公众号
    内部类
    Java Web整合开发(30) -- Spring的ORM模块
    win10安装mysql
    jquery 事件冒泡的介绍以及如何阻止事件冒泡
    jquery中attr和prop的区别介绍
    jQuery 层次选择器
  • 原文地址:https://www.cnblogs.com/liuhai35/p/5341895.html
Copyright © 2011-2022 走看看