EXT--Core实现Checkbox的全选-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_4927/article/details/82540842

开发者博客：www.developsearch.com

全选/不选在很多时候我们都会使用到,在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> | <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 .

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;});
  }  
});     
});

开发者博客：www.developsearch.com