checkbox全选

经常会碰到checkbox全选的情况,留个模板,以后备用:

<!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;
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="200" border="1">
  <tr bgcolor="#FFFF66">
    <td>
      <INPUT name="queryAll" id="queryAll" title="全选" onClick="ChkAllClick('chkSon','queryAll')" type="checkbox" />全选</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' onclick="ChkSonClick('chkSon','queryAll')" />1</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' onclick="ChkSonClick('chkSon','queryAll')" />5</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon3" type="checkbox"  value='3' onclick="ChkSonClick('chkSon','queryAll')" />2</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon4" type="checkbox"  value='4' onclick="ChkSonClick('chkSon','queryAll')" />1</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon5" type="checkbox"  value='5' onclick="ChkSonClick('chkSon','queryAll')" />0</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon6" type="checkbox"  value='6' onclick="ChkSonClick('chkSon','queryAll')" />2</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon7" type="checkbox"  value='7' onclick="ChkSonClick('chkSon','queryAll')" />2</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon8" type="checkbox"  value='8' onclick="ChkSonClick('chkSon','queryAll')" />1</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon9" type="checkbox"  value='9' onclick="ChkSonClick('chkSon','queryAll')" />2</td>
  </tr>
    <tr>
    <td><INPUT name="chkSon" id="chkSon9" type="checkbox"  value='9' onclick="ChkSonClick('chkSon','queryAll')" />0</td>
  </tr>
    <tr>
    <td><INPUT name="chkSon" id="chkSon9" type="checkbox"  value='9' onclick="ChkSonClick('chkSon','queryAll')" />0</td>
  </tr>

</table>
</form>
</body>
</html>


你可能感兴趣的:(checkbox,全选,复选框,反选)