如何為你的表單添加一個(gè)反選功能
原始代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>無標(biāo)題文檔</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" />復(fù)選框1</td>
? ? ? <td> </td>
? ? </tr>
? ? <tr>
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框2</td>
? ? ? <td> </td>
? ? </tr>
? ? <tr>
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框3</td>
? ? ? <td> </td>
? ? </tr>
? ? <tr>
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框4</td>
? ? ? <td> </td>
? ? </tr>
? ? <tr>
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框5</td>
? ? ? <td> </td>
? ? </tr>
? </table>
</form>
</body>
</html>
修改后的代碼
<!DOCTYPE html>?
<html>?
<head>?
<meta charset="UTF-8">?
<title>無標(biāo)題文檔</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" />復(fù)選框1</td>?
? ? ? <td> </td>?
? ? </tr>?
? ? <tr>?
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框2</td>?
? ? ? <td> </td>?
? ? </tr>?
? ? <tr>?
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框3</td>?
? ? ? <td> </td>?
? ? </tr>?
? ? ?<tr>?
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框4</td>?
? ? ? <td> </td>?
? ? </tr>?
? ? ?<tr>?
? ? ? <td><input name="check" type="checkbox" value="checkbox" />復(fù)選框5</td>?
? ? ? <td> </td>?
? ? </tr>?
? </table>?
</form>?
</body>?
</html>
