使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能,

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能,相关的知识,希望对你有一定的参考价值。

你用的是datagrid的控件,这个控件里面有一个singleSelect的属性,这个属性的意思是:如果设置
为true
就会只允许选中一行,就不能全选了;所以你设置singleSelect:false
就可以了
参考技术A 你只需要在复选框的回发事件中处理下拉框enable属性就可以了。
具体实现:
将复选框的autopostback属性设置为true,oncheckedchanged事件中根据选中情况设置下拉框enable属性。

原生js实现的复选框的全选和全不选效果

原生js实现的复选框的全选和全不选效果:
使用jquery实现复选框的全选和全部选效果非常的简单,这里就不介绍了,具体可以参阅jQuery实现的checkbox复选框全选和全不选效果一章节,下面介绍一下如何使用原生javascript实现此效果,代码如下:

 

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
body{font-size:12px;}
ul{list-style:none}
</style>
<script type="text/javascript">
window.onload=function()
{
  var box=document.getElementById("box");
  var flag=document.getElementById("flag");
  var checkAll=document.getElementById("checkAll");
  checks=box.getElementsByTagName("input");
  checkAll.onclick=function()
  {
    if(this.checked)
        {
          for(var i=0;i<checks.length;i++)
          {
            checks[i].checked=true;
          }
          flag.innerHTML="取消";
    }
        else
        {
          for(var i=0;i<checks.length;i++)
          {
            checks[i].checked=false;
          }
          flag.innerHTML="全选";
        }
  }
}
</script> 
</head> 
<body >
<ul id="box">
  <li><input type="checkbox">蚂蚁部落一</li>
  <li><input type="checkbox">蚂蚁部落二</li>
  <li><input type="checkbox">蚂蚁部落三</li>
  <li><input type="checkbox">蚂蚁部落四</li>
</ul>
<input type="checkbox" id="checkAll"><span id="flag">全选</span> 
</body> 
</html>

 

以上代码实现了全选和全不选效果,代码非常的简单,下面做一下简单的介绍。
一.实现原理:
当点击底部复选框的时候,代码首先会判断此复选框是否被选中,如果被选中,说明要全选,然后使用for循环遍历整个复选框,将复选框设置为选中状态,并且将span中的文本设置为取消,取消全选也是一样的道理,这里就不多介绍了。
二.相关阅读:
1.getElementsByTagName()函数可以参阅javascript的document.getElementsByTagName()一章节。 
2.onclick事件可以参阅javascript的onclick事件一章节。 
3.checked属性可以参阅javascript的checkbox.checked属性一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11489

更多内容可以参阅:http://www.softwhy.com/javascript/

 

以上是关于使用Easyui ,表格表头的复选框怎么实现全选和取消全选的功能,的主要内容,如果未能解决你的问题,请参考以下文章

jquery easyui的全选

EasyUI下拉框实现多选全选复选和模糊查询

TreeView怎么实现复选框的全选和取消全选

AJAX实现弹窗显示详情,全选和批量删除

原生js实现的复选框的全选和全不选效果

Vue实现单选、全选和反选