javascript------实现全选、反选、全不选

最新推荐文章于 2019-04-19 20:36:16 发布

黄志刚

最新推荐文章于 2019-04-19 20:36:16 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax学习笔记

本文链接：https://blog.youkuaiyun.com/u010591939/article/details/41283141

Ajax学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何使用JSP和JavaScript实现网页上的复选框全选全不选功能，包括全选、全不选和反选操作的实现，通过获取所有复选框并设置其checked属性来完成这些操作。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'checked.jsp' starting page</title>

   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   

</head>

<body>
   <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选<br/>
   <input type="checkbox" name="items" value="足球">足球<br/>
   <input type="checkbox" name="items" value="篮球">篮球<br/>
   <input type="checkbox" name="items" value="排球">排球<br/>
   <input type="button" name="checkall" id="checkall" value="全选">
   <input type="button" name="checkall" id="checkallNo" value="全不选">
   <input type="button" name="checkall" id="check_revsern" value="反选">
</body>
<script language="javascript">
//================================//处理全选============================
document.getElementById("checkall").onclick=function(){
//获取所有复选框
var checkElements = document.getElementsByName("items");
//其中一个复选框
for(var i = 0;i<checkElements.length;i++){
           var checkElement = checkElements[i];
           //设置属性checked
           //方法一
           //checkElement.setAttribute("checked","checked");
           //方法二
           checkElement.checked="checked";
}
}

//=============================//处理全不选===========================================
document.getElementById("checkallNo").onclick=function(){
//获取所有复选框
var checkElements = document.getElementsByName("items");
//其中一个复选框
for(var i = 0;i<checkElements.length;i++){
           var checkElement = checkElements[i];
           //设置属性checked
           //方法一
           //checkElement.setAttribute("checked",null);
           //方法二
           checkElement.checked=null;
}

}
//================================//处理反选============================
document.getElementById("check_revsern").onclick=function(){
//获取所有复选框
var checkElements = document.getElementsByName("items");
//其中一个复选框
for(var i = 0;i<checkElements.length;i++){
           var checkElement = checkElements[i];
           //当checkElement被选中
           if(checkElement.checked){
           checkElement.checked=null;
           }else{
           checkElement.checked="checked";

           }
}

}
//================================//处理全选/全不选============================
document.getElementById("checkItems").onclick=function(){
//获取所有复选框
var checkElements = document.getElementsByName("items");
if(this.checked){//如果全选/全不选框处于被选中状态

//其中一个复选框
for(var i = 0;i<checkElements.length;i++){
           var checkElement = checkElements[i];
           checkElement.checked="checked";
}
}else{
   for(var i = 0;i<checkElements.length;i++){
           var checkElement = checkElements[i];
           checkElement.checked=null;
}
}
}
</script>
</html>