Ext Core实现Checkbox的全选

Posted 周二, 03/09/2010 - 01:51 by admin

全选/不选在很多时候我们都会使用到,在Ext Core出来之前,我一直使用纯javascript写的全选,反选.虽然可以实现,但代码始终还是不够简洁.现在我们使用Ext Core,简单的几句代码就可以实现这一个功能.
实现方法如下:

1,新建一个 check_all_none.html.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选中列表中的所有Checkbox</title>
<script type="text/javascript" src="../../ext-core-debug.js"></script>
<script type="text/javascript" src="check_all_none.js"></script>
<link rel="stylesheet" href="check_all_none.css" />
</head>
<body>
<table id="fun" border="0" align="center" cellpadding="0" cellspacing="1">
  <tr id="header">
    <td width="25"><input type="checkbox" id="checkall" name="checkall"></td>
    <td>Name</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="1" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 1</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="2" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 2</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="3" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 3</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="4" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 4</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="5" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 5</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="6" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 6</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="7" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 7</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="8" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 8</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" value="9" id="funcode[]" name="funcode[]"></td>
    <td>ExtCore 9</td>
  </tr>
  </tbody>
</table>
<p style="text-align:center; font-size:18px;">© 2010 <a href="http://extjs.org.cn" target="_blank">ExtJs.org.cn</a> |  </p>
</body>
</html>

2,新加一个被引用的 check_all_none.js .

 
Ext.onReady(function(){
Ext.get('checkall').on('click',function(){
  if(this.dom.checked){
   Ext.select('input[name^=funcode]').each(function(){this.dom.checked = true;});
  }else{
   Ext.select('input[name^=funcode]').each(function(){this.dom.checked = false;});
  }  
});     
});

嗯,我们会发现,上面的几行代码就实现了我们想要的功能.非常简单明子.

可以在线试一下效果:
http://www.extjs.org.cn/ext-core/user-examples/checkbox/check_all_none.html

源代码下载:
http://www.extjs.org.cn/ext-core/user-examples/checkbox/check_all_none.zip

作者：肥占
出处：http://extjs.org.cn
本文版权归作者和ExtJs中文资讯站共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接。