控制复选框的全选或反选

在查看数据信息时，经常需要对多条数据进行操作。例如，删除数据时，通过控制复选框的全选或反选，可以批量删除数据等。以下实例，选中“全选/反选”复选框，表单中所有的复选框都将处于选中状态，如图所示：

本实例应用的自定义javascript函数首先判断表单中包含复选框的数量，如果数量大于0，则使用for循环语句设置所有复选框的checked属性为true，如果“全选/反选”复选框处于未选中状态，则设置所有复选框的checked属性值为false。

控制复选框的全选伙反选的关键代码如下：

<script type="text/javascript">
function CheckAll(elementsA,elementsB)
{
    var len = elementsA;
    if(len.length > 0)
    {
        for(i=0;i<len.length;i++)
        {
            elementsA[i].checked = true;
        }
        if(elementsB.checked ==false)
        {
            for(j=0;j<len.length;j++)
            {
                elementsA[j].checked = false;
            }
        }
    }
    else
    {
        len.checked = true;
        if(elementsB.checked == false)
        {
            len.checked = false;
        }
    }
}
</script>

html代码如下：

<form name="form1">
  <table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#60A2EA">
    <tr bgcolor="#FFFFFF">
      <td height="22" colspan="5" align="left">商品信息查看</td>
    </tr>
    <tr align="center" class="white">
      <td height="22">选择</td>
      <td height="22">所属类别</td>
      <td height="22">商品名称</td>
      <td height="22">会员价</td>
      <td height="22">数量</td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF">
      <td height="22"><input name="chk_id" type="checkbox" id="chk_id" value="1"></td>
      <td height="22"> 手机 </td>
      <td height="22"> P_L音乐手机 </td>
      <td height="22"> 1980 </td>
      <td height="22">200</td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF">
      <td height="22"><input name="chk_id" type="checkbox" id="chk_id" value="2"></td>
      <td height="22"> 玻璃制品 </td>
      <td height="22"> 迷你水杯 </td>
      <td height="22"> 49 </td>
      <td height="22">500</td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF">
      <td height="22"><input name="chk_id" type="checkbox" id="chk_id" value="3"></td>
      <td height="22"> 音响 </td>
      <td height="22"> CXO音响 </td>
      <td height="22"> 2070  </td>
      <td height="22">200</td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF">
      <td height="22"><input name="chk_id" type="checkbox" id="chk_id" value="4"></td>
      <td height="22"> 休闲装 </td>
      <td height="22"> 休闲上衣 </td>
      <td height="22"> 195 </td>
      <td height="22">500</td>
    </tr>
    <tr align="center" bgcolor="#FFFFFF">
      <td height="22" colspan="5" align="left">&nbsp;&nbsp;
        <input name="chk_all" type="checkbox" id="chk_all" value="checkbox" onClick="CheckAll(this.form.chk_id,this.form.chk_all)">
      [全选/反选]</td>
    </tr>
  </table>
</form>