如何为你的表单添加一个反选功能
原始代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function chkall(input1,input2)
{
var objForm = document.forms[input1];
var objLen = objForm.length;
for (var i = 0; i < objLen; i++)
{
if (input2.checked == true)
{
if (objForm.elements[i].type == "checkbox")
{
objForm.elements[i].checked = "checked";//true
}
}
else
{
if (objForm.elements[i].type == "checkbox")
{
objForm.elements[i].checked = "";//false
}
}
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#999999"><input name="checkAll" type="checkbox" id="checkAll" value="checkbox" onClick="chkall('form1',this)" />选择所有</td>
<td bgcolor="#999999"> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框1</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框2</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框3</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框4</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框5</td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
修改后的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function chkall(input1,input2)
{
var objForm = document.forms[input1];
var objLen = objForm.length;
for (var i = 0; i < objLen; i++)
{
if (input2.checked == true)
{
if (objForm.elements[i].type == "checkbox")
{
objForm.elements[i].checked = "checked";//true
}
}
else
{
if (objForm.elements[i].type == "checkbox")
{
objForm.elements[i].checked = "";//false
}
}
}
}
function reverseSelection(input1) {
var objForm = document.forms[input1];
var objLen = objForm.length;
for (var i = 0; i < objLen; i++) {
if (objForm.elements[i].type == "checkbox") {
objForm.elements[i].checked = !objForm.elements[i].checked;
}
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="50%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#999999"><input name="checkAll" type="checkbox" id="checkAll" value="checkbox" onClick="chkall('form1',this)" />选择所有</td>
<td bgcolor="#999999"><input type="button" value="反选" onclick="reverseSelection('form1')" /></td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框1</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框2</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框3</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框4</td>
<td> </td>
</tr>
<tr>
<td><input name="check" type="checkbox" value="checkbox" />复选框5</td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
