checkbox全选与反选

转载 2013年12月02日 20:45:17
<!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>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon1" type="checkbox"  value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td>
    <td> 作用: </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon2" type="checkbox"  value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td>
    <td> a.单击列头复选框全选或全不选子项 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon3" type="checkbox"  value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td>
    <td> b.只要有一个子项没有选中,则取消列头的选中状态 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon4" type="checkbox"  value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td>
    <td> c.当所有子项目选中时,列头复选框自动置为选中状态 </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon5" type="checkbox"  value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon6" type="checkbox"  value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon7" type="checkbox"  value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon8" type="checkbox"  value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><INPUT name="chkSon" id="chkSon10" type="checkbox"  value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td>
    <td>d.将复选框反过来选</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr bgcolor="#66FFFF">
    <td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
    <td align="center">反选示例</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>
</body>
</html>

相关文章推荐

Js_Checkbox全选反选案列

代码: checkboxs.html

Jquery全选反选Checkbox

  • 2013年10月23日 09:56
  • 123KB
  • 下载

Android实战简易教程-第五十一枪(ListView实现子控件的动态显示和隐藏、checkbox全选和反选)

前段时间写过一篇文章:Android实战简易教程-第四十七枪(ListView多选-实现点餐系统)有的同学留言建议,可不可以动态控制checkbox的显示和全选反选功能,我研究了一下,发现实现也比较容...

checkbox实现全选和反选经典例子

  • 2013年01月22日 17:16
  • 19KB
  • 下载

Checkbox全选反选.html

  • 2012年12月10日 20:26
  • 1KB
  • 下载

JavaScript学习笔记之js实现复选框checkbox的全选、反选示例

1.选中全选复选框,则其他的复选框自动全部选中; 2.已选中全选复选框,再次点击全选复选框,则其他复选框全部不选中; 3.当全部其他复选框都被选中时,全选复选框自动被选中; 4.当全部其他复选框...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:checkbox全选与反选
举报原因:
原因补充:

(最多只允许输入30个字)