使用JavaScript代码实现各种数据控件的反选功能
编程学习 2021-07-04 22:40www.dzhlxh.cn编程入门
在我们做许多项目的时候，会用到反选这个功能，但是我一般使用C#代码创建数组遍历实现功能，今天我想换一种语言实现一下，于是我就用JavaScript研究了一下怎么实现这个功能
原来也很简单和用C#语言来实现这个差不多吧，只不过使唤了两种语言哦，而且这样写代码对系统的性能也比较好。如图所示：为反选所实现的功能。
狼蚁网站SEO优化将实现反选的两部分代码写一下哦。控件使用的是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>