复选框全选、全不选

原创 2012年03月22日 14:11:03
<!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=utf-8">
<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>

微信用户提现不能到账,显示NO_AUTH | 产品权限验证失败,请查看您当前是否具有该产品的权限

微信用户提现不能到账,显示NO_AUTH | 产品权限验证失败,请查看您当前是否具有该产品的权限http://blog.csdn.net/linchaoren66/article/details/76...
  • sinat_39684057
  • sinat_39684057
  • 2017年11月24日 14:48
  • 3478

微信用户提现不能到账,显示NO_AUTH | 产品权限验证失败,请查看您当前是否具有该产品的权限(企业付款到零钱)

企业付款到零钱 一、开通条件 需同时满足两个条件,才有开通该功能入口: 1、T+0 (T日结算至基本账户),结算商户需满足两个条件:      1、入驻满90天,      2、截止今日往回推...
  • haibo0668
  • haibo0668
  • 2017年12月12日 16:18
  • 1492

微信用户提现不能到账,显示NO_AUTH | 产品权限验证失败,请查看您当前是否具有该产品的权限

今天做分销商城时,当用户提现  显示NO_AUTH | 产品权限验证失败,请查看您当前是否具有该产品的权限。 出现这个问题是因为我们的微信商户平台没有开通“企业付款到用户”功能。 微信商户产品中心里并...
  • linchaoren66
  • linchaoren66
  • 2017年07月25日 14:32
  • 6390

微信支付代付通道开通流程

提供企业向用户付款的功能,支持企业通过API接口付款,或通过微信支付商户平台网页功能操作付款。 开通   开通条件:   1、商户号已入驻90日   2、商户号有3...
  • paymm
  • paymm
  • 2017年08月14日 15:16
  • 2575

浏览器

html,css,javascript    会使用并要精通 html标准的rfc要400多页吧你先弄明白了再说  1年时间  数据结构,编译原理 精通,并会独立的设计编写简单的编译器  1年时间 ...
  • Hai_Yi_Meng
  • Hai_Yi_Meng
  • 2012年03月19日 10:25
  • 2

ubuntu ftp server 详细配置

1)安装vsftpd sudo apt-get install vsftpd 2)设置 vsftpd.conf文件 注意:设置之前请备份!! sudo cp /etc/vsftpd.conf ...
  • namecyf
  • namecyf
  • 2012年02月27日 21:39
  • 552

html checkbox 实现全选/取消全选

html checkbox  实现全选/取消全选 Month Savings January $100 ...
  • graceup
  • graceup
  • 2015年06月26日 15:35
  • 19044

jquery实现复选框的全选操作

最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的。自己琢磨了下,把功能实现,整理如下。 实现细节如...
  • mj158518
  • mj158518
  • 2016年07月20日 00:30
  • 3591

如何利用jQuery使复选框一键全选/全不选

我们先写一个表单: 你爱好的运动是? 全选/不全选 1 2 3 4 在第一个复选框中添加click()事件, 核心的jQuery代码如下: $(document)...
  • hxy19971101
  • hxy19971101
  • 2016年08月07日 17:09
  • 3689

HTML 复选框 checkbox 的 JavaScript 的全选和全反选

checkbox 或者按钮实现 form 内的 checkbox 全选或者反选,代码很简单,全部代码如下: Insert title here 序号 选择 ...
  • joyous
  • joyous
  • 2013年09月30日 11:16
  • 33462
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:复选框全选、全不选
举报原因:
原因补充:

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