js的复选框的全选、反选、展开、收缩

<%@ 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 'js9.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">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
function checkAll(object)
{
var selectAll = document.getElementsByName('cb');
if(object.checked)
{
for(var i = 0; i < selectAll.length; i++)
{
selectAll[i].checked = true;
}
}
else
{
for(var i = 0; i < selectAll.length; i++)
{
selectAll[i].checked = false;
}
}
}

function selectNo()
{

var a = document.getElementsByName("test")[0];
var b = document.getElementById("t");


if(a.value == '收缩')
{
b.style.display = "none";
a.value = "展开";
return ;
}
else
{
b.style.display = "block";
a.value = "收缩";
}


}

//反选
function checkFx(object)
{
var fx = document.getElementsByName("cb");
var count = 0;
for(var i = 0; i < fx.length; i++)
{
if(fx[i].checked)
{
count++;
}
}
if(count == 0)
{
alert("对不起, 你未选择任何对象");
document.getElementsByName("fx")[0].checked = false;
return;
}
for(var i = 0; i < fx.length; i++)
{
if(fx[i].checked)
{
fx[i].checked = false;
}
else
{
fx[i].checked = true;
}
}
}
</script>
</head>

<body>
<table border="1 solid red" width="80%" align="center">
<tr>
<td><input type="checkbox" onclick="checkAll(this)" name="qx">全选</td><td><input type="button" value="收缩" onclick="selectNo();" name="test"></td>
<td><input type="checkbox" onclick="checkFx(this)" name="fx">反选
</tr>

</table>

<%

int num = Integer.parseInt(request.getParameter("num"));
%>

<table border="1 solid red" width="80%" id="t" align="center">
<%
for(int i = 0; i < num ;i++){

%>
<tr>
<td><input type="checkbox" name="cb"></td><td><%=i %></td>
</tr>
<% }%>
</table>
<br/>


<input type="button" name="te" value="曹欢">
<script type="text/javascript">
document.getElementsByName('te')[0].onclick = function()
{
alert(document.getElementsByName('te')[0].value);
}

</script>
</body>
</html>

你可能感兴趣的:(复选框)