Ext Core实现Checkbox的全选

来源：互联网发布：淘宝上有哪些促销活动编辑：程序博客网时间：2024/05/18 09:10

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

1,新建一个 check_all_none.html.

view source
print?
<!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> | <script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%65%78%74%6a%73%63%6e%40%31%32%36%2e%63%6f%6d%22%3e%65%78%74%6a%73%63%6e%40%31%32%36%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><a href="mailto:extjscn@126.com">extjscn@126.com</a> </p>
</body>
</html>

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

view source
print?
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;});
 } 
});    
});