Javascript实现表格的全选框


本文示例源代码或素材下载

  这是一个老生常谈的问题了,不过还是拿我的解决办法来晒晒太阳。

  最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的

  1. 第一种解决方法

<tableborder="1"cellpadding="3"cellspacing="0">
  <tr>
    <th>
      <inputtype="checkbox"onclick="checkAll(this,'item1');"/>
    </th>
    <th>ID</th>
    <th>用户名</th>
  </tr>
  <tr>
    <td>
      <inputtype="checkbox"class="item1"/>
    </td>
    <td>1001</td>
    <td>张三</td>
  </tr>
  <tr>
    <td>
      <inputtype="checkbox"class="item1"/>
    </td>
    <td>1002</td>
    <td>李四</td>
  </tr>
</table>
  
functioncheckAll(sender,checkClass){
  varcheckItems=document.getElementsByTagName('input');
  for(vari=0;i<checkItems.length;i++){
    varcheckItem=checkItems[i];
    if(checkItem.type==='checkbox'&&checkItem.className==='item1'){
      checkItem.checked=sender.checked;
    }
  }
}

  仔细分析,这里面使用的 getElementsByTagName 会把页面上所有的 input 标签都找到(包括单行文本输入框,

  按钮,所有的单选和多选框等),然后再执行过滤,这是一种效率不高的方法。

  如果能用 getElementsByName 直接获取需要的多选框,岂不是更高效,就有了下面的方法

  2. 第二种解决方法

<tableborder="1"cellpadding="3"cellspacing="0">
  <tr>
    <th>
      <inputtype="checkbox"onclick="checkAll2(this,'item1');"/>
    </th>
    <th>ID</th>
    <th>用户名</th>
  </tr>
  <tr>
    <td>
      <inputtype="checkbox"name="item1"/>
    </td>
    <td>1001</td>
    <td>张三</td>
  </tr>
  <tr>
    <td>
      <inputtype="checkbox"name="item1"/>
    </td>
    <td>1002</td>
    <td>李四</td>
  </tr>
</table>
  
functioncheckAll2(sender,checkName){
  varcheckItems=document.getElementsByName(checkName);
  for(vari=0;i<checkItems.length;i++){
    checkItems[i].checked=sender.checked;
  }
}

  上面这种方法虽然简洁,但是 getElementsByName 只是 document 的方法,其他DOM对象没有此方法。(正如留言中@笛子 所说)

  所以效率比较高的方法,还是在table的上下文中使用 getElementsByTagName 来查找,我们给 table 添加 id 属性

  为 table1。

  3. 效率比较高的解决方法

<inputtype="checkbox"onclick="checkAll3(this,'table1','item1');"/>
  
functioncheckAll3(sender,tableId,checkClass){
  varcheckItems=document.getElementById(tableId).getElementsByTagName('input');
  for(vari=0;i<checkItems.length;i++){
    varcheckItem=checkItems[i];
    if(checkItem.type==='checkbox'&&checkItem.className==='item1'){
      checkItem.checked=sender.checked;
    }
  }
}


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3