1.方法1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全選與反選</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language=javascript> function unselectall(){ if(document.myform.chkAll.checked){ document.myform.chkAll.checked = document.myform.chkAll.checked&0; } } function CheckAll(form){ for (var i=0;i<form.elements.length;i++){ var e = form.elements[i]; if (e.Name != 'chkAll'&&e.disabled==false) e.checked = form.chkAll.checked; } } </script> 在網頁中html中的代碼: <form name="myform" method="post" id="myform" action="" > <input name='id' type='checkbox' onclick='unselectall()' id='id' value='1'> 設計家園 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='2'> 網頁教程 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='3'> 酷站欣賞 <input name='id' type='checkbox' onclick='unselectall()' id='id' value='4'> 網頁素材 <input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'> 全選 </form> </body> </html>
2.方法2：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>全選與反選</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> // --列頭全選框被單擊--- function ChkAllClick(sonName, cbAllId){ var arrSon = document.getElementsByName(sonName); var cbAll = document.getElementById(cbAllId); var tempState=cbAll.checked; for(i=0;i<arrSon.length;i++) { if(arrSon[i].checked!=tempState) arrSon[i].click(); } } // --子項復選框被單擊--- function ChkSonClick(sonName, cbAllId) { var arrSon = document.getElementsByName(sonName); var cbAll = document.getElementById(cbAllId); for(var i=0; i<arrSon.length; i++) { if(!arrSon[i].checked) { cbAll.checked = false; return; } } cbAll.checked = true; } // --反選被單擊--- function ChkOppClick(sonName){ var arrSon = document.getElementsByName(sonName); for(i=0;i<arrSon.length;i++) { arrSon[i].click(); } } </script> </head> <body> <form name="form1" method="post" action=""> <table width="500" border="1"> <tr bgcolor="#FFFF66"> <td> <INPUT name="chkAll" id="chkAll" title="全選" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全選</td> <td align="center">復選框全選示例 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td> <td> 作用： </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td> <td> a.單擊列頭復選框全選或全不選子項 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td> <td> b.只要有一個子項沒有選中，則取消列頭的選中狀態 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td> <td> c.當所有子項目選中時，列頭復選框自動置為選中狀態 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td> <td>d.將復選框反過來選</td> <td> </td> <td> </td> </tr> <tr bgcolor="#66FFFF"> <td><INPUT name="chkOpposite" id="chkOpposite" title="反選" onClick="ChkOppClick('chkSon')" type="checkbox" />反選</td> <td align="center">反選示例</td> <td> </td> <td> </td> </tr> </table> </form> </body> </html>
3.取值
var num=0;
var value=[];
var c=document.getElementsByTagName("INPUT");
for(var i=0;i<c.length;i++){
if(c[i].type=="checkbox"&&c[i].checked)
{
num++;
value[value.length]=c[i].value;
}
}
alert("共有"+num+"個復選框被選中,值為"+value);