使用JavaScript代码实现各种数据控件的反选功能 不要只做拖控件的菜鸟
更新时间:2021年9月22日 10:19 点击:1918
原来也很简单和用C#语言来实现这个差不多吧,只不过使唤了两种语言哦,而且这样写代码对系统的性能也比较好。如图所示:为反选所实现的功能。
下面将实现反选的两部分代码写一下哦。控件使用的是GridView控件
<asp:TemplateField HeaderText="<input type='checkbox' id='cbAll' name='cbAll' onclick='selAll(this.checked);' />反选">
<ItemTemplate>
<input type="checkbox" id="cbName" name="cbName" value='<%# DataBinder.Eval(Container.DataItem, "ProductID")%>' />
</ItemTemplate>
</asp:TemplateField>
然后写JavaScript代码来实现这个功能:
<script type="text/javascript">
function selAll(boolValue)
{
var obj=document.getElementsByName("cbName");
var cbNameLen=obj.length;
if(cbNameLen>1)
{
for(var i=0;i<cbNameLen;i++)
{
if(obj[i].checked)
{
obj[i].checked=false;
}
else
{
obj[i].checked=true;
}
}
}
else
{
obj.checked = boolValue;
}
}
function clickBtnCheck()
{
var obj=document.getElementsByName("cbName");
var cbNameLen=obj.length;
var Flag=false;
if(cbNameLen>0)
{
for(var i=0;i<cbNameLen;i++)
{
if(obj[i].checked)
{
Flag=true;
break;
}
}
if(Flag)
{
return true;
}
else
{
alert("请先选择要操作的记录! ");
return false;
}
}
else
{
alert("现在没有记录,不能操作!");
return false;
}
}
</script>
复制代码 代码如下:
<asp:TemplateField HeaderText="<input type='checkbox' id='cbAll' name='cbAll' onclick='selAll(this.checked);' />反选">
<ItemTemplate>
<input type="checkbox" id="cbName" name="cbName" value='<%# DataBinder.Eval(Container.DataItem, "ProductID")%>' />
</ItemTemplate>
</asp:TemplateField>
然后写JavaScript代码来实现这个功能:
复制代码 代码如下:
<script type="text/javascript">
function selAll(boolValue)
{
var obj=document.getElementsByName("cbName");
var cbNameLen=obj.length;
if(cbNameLen>1)
{
for(var i=0;i<cbNameLen;i++)
{
if(obj[i].checked)
{
obj[i].checked=false;
}
else
{
obj[i].checked=true;
}
}
}
else
{
obj.checked = boolValue;
}
}
function clickBtnCheck()
{
var obj=document.getElementsByName("cbName");
var cbNameLen=obj.length;
var Flag=false;
if(cbNameLen>0)
{
for(var i=0;i<cbNameLen;i++)
{
if(obj[i].checked)
{
Flag=true;
break;
}
}
if(Flag)
{
return true;
}
else
{
alert("请先选择要操作的记录! ");
return false;
}
}
else
{
alert("现在没有记录,不能操作!");
return false;
}
}
</script>
相关文章
- 这篇文章主要介绍了关于input全选反选恶心的异常情况的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-07-29
- 我们在做项目的时候,经常需要实现全选和反选功能,到网上搜了一圈,发现网上写的全选的代码,不是完整的,是有bug的。下面结合自己的项目给大家分享下。...2016-01-05
- 下面小编就为大家带来一篇jquery 全选、全不选、反选效果的实现代码【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-09
使用JavaScript代码实现各种数据控件的反选功能 不要只做拖控件的菜鸟
在我们做许多项目的时候,会用到反选这个功能,但是我一般使用C#代码创建数组遍历实现功能,今天我想换一种语言实现一下,于是我就用JavaScript研究了一下怎么实现这个功能...2021-09-22gridview checkbox从服务器端和客户端两个方面实现全选和反选
GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下,希望本文对你有所帮助...2021-09-22- 上次做了一个前端项目,其中有功能要求实现jquery 全选和反选功能,下面小编抽个时间把实现代码分享到脚本之家平台供大家参考下...2016-08-24
- asp.net获得数据控件事件索引并获取其中值总结,需要的朋友可以参考下。...2021-09-22
- 本文主要分享了使用jQuery实现复选框的全选和反选的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧...2017-02-08
- photoshop是一款常用的制图软件,那么ps反选快捷键是什么你知道吗?不知道的,一起来看看下面这篇文章。  photoshop是大家比较常用的图片处理软件,而PS反选是经常...2017-07-06
- 本文主要介绍ASP.NET 2.0中如何在数据控件内嵌套一个数据控件,可以在Repeater控件的ItemTemplate节点下嵌套各种其他(如Repeater、GridView或DataList等)的控件。...2021-09-22
- 这篇文章主要介绍了asp.net Xml绑定到数据控件的两种简单方法 ,需要的朋友可以参考下...2021-09-22