js操作CheckBoxList实现全选/反选(在客服端完成)
更新时间：2013年02月02日 17:14:16 作者：
对于CheckBoxList控件来说，一方面要实现大量数据在服务器端的绑定工作，另一方面往往要求实现全选、反选等功能,接下来将介绍js操作CheckBoxList实现全选/反选，感兴趣的朋友可以了解下，或许对你有所帮助
对于CheckBoxList控件来说，一方面要实现大量数据在服务器端的绑定工作，另一方面往往要求实现全选、反选等功能。虽然可以在服务器端完成这方面的工作，但这样一个简单的工作似乎更应该在客户端完成。
具体方法：
在页面中放入一个CheckBoxList控件，并添加几项，用来分析其产生的HTML代码，这样在使用js进行
动态控制时，将会非常清晰其测试代码如下所示：
<asp:CheckBoxListID="CheckBoxList1"runat="server"CellPadding="3"CellSpacing="3"
RepeatColumns="3">
<asp:ListItem>1232</asp:ListItem>
<asp:ListItem>254</asp:ListItem>
<asp:ListItemValue="5643">5643</asp:ListItem>
<asp:ListItem>789</asp:ListItem>
<asp:ListItem>654</asp:ListItem>
<asp:ListItem>564</asp:ListItem>
<asp:ListItem>8564</asp:ListItem>
<asp:ListItem>8564</asp:ListItem>
<asp:ListItem>5452</asp:ListItem>
<asp:ListItem>5641</asp:ListItem>
</asp:CheckBoxList>
在浏览器中查看，并对Html进行分析：以下是DropDownList控件生成的HTML代码。
<tableid="CheckBoxList1"cellspacing="3"cellpadding="3"border="0">
<tr>
<td><inputid="CheckBoxList1_0"type="checkbox"name="CheckBoxList1$0"/><labelfor="CheckBoxList1_0">1232</label>
</td>
<td><inputid="CheckBoxList1_4"type="checkbox"name="CheckBoxList1$4"/><labelfor="CheckBoxList1_4">654</label>
</td>
.......
</table>
在这里，节选了部分代码，其中蓝色部分是我们关心的。在HTML中CheckBoxList生成了
许多input（type为checkbox），并且其ID为“CheckBoxList1_i”（i为数字）。这样我们只
需要知道一共有几项就可以轻松的实现js对它的控制。
这些input都包含在一个id为CheckBoxList1的table中，因此可以通过：
document.getElementById("CheckBoxList1").getElementsByTagName("input").length
这一方法获取CheckBoxList一共有多少项，剩下的工作其实就很简单了，通过js更改每一个
checkbox的状态即可。先添加三个button，用来实现全选、反选及清除控制，如下所示：
<inputtype="button"onclick="checkAll()"value="checkAll"/>
<inputtype="button"onclick="ReverseAll()"value="ReverseAll"id="Button1"/>
<inputtype="button"onclick="deleteAll()"value="deleteAll"/>
添加全选、反选及清除函数如下：
functioncheckAll(){
//alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length);
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
document.getElementById("CheckBoxList1_"+i).checked=true;
}
}
functiondeleteAll(){
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
document.getElementById("CheckBoxList1_"+i).checked=false;
}
}
functionReverseAll(){
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
varobjCheck=document.getElementById("CheckBoxList1_"+i);
if(objCheck.checked)
objCheck.checked=false;
else
objCheck.checked=true;
}
}
OK，现在通过IE测试，绑定工作可以在后台，全选等辅助功能可以自由发挥了！
具体方法：
在页面中放入一个CheckBoxList控件，并添加几项，用来分析其产生的HTML代码，这样在使用js进行
动态控制时，将会非常清晰其测试代码如下所示：
复制代码 代码如下:
<asp:CheckBoxListID="CheckBoxList1"runat="server"CellPadding="3"CellSpacing="3"
RepeatColumns="3">
<asp:ListItem>1232</asp:ListItem>
<asp:ListItem>254</asp:ListItem>
<asp:ListItemValue="5643">5643</asp:ListItem>
<asp:ListItem>789</asp:ListItem>
<asp:ListItem>654</asp:ListItem>
<asp:ListItem>564</asp:ListItem>
<asp:ListItem>8564</asp:ListItem>
<asp:ListItem>8564</asp:ListItem>
<asp:ListItem>5452</asp:ListItem>
<asp:ListItem>5641</asp:ListItem>
</asp:CheckBoxList>
在浏览器中查看，并对Html进行分析：以下是DropDownList控件生成的HTML代码。
复制代码 代码如下:
<tableid="CheckBoxList1"cellspacing="3"cellpadding="3"border="0">
<tr>
<td><inputid="CheckBoxList1_0"type="checkbox"name="CheckBoxList1$0"/><labelfor="CheckBoxList1_0">1232</label>
</td>
<td><inputid="CheckBoxList1_4"type="checkbox"name="CheckBoxList1$4"/><labelfor="CheckBoxList1_4">654</label>
</td>
.......
</table>
在这里，节选了部分代码，其中蓝色部分是我们关心的。在HTML中CheckBoxList生成了
许多input（type为checkbox），并且其ID为“CheckBoxList1_i”（i为数字）。这样我们只
需要知道一共有几项就可以轻松的实现js对它的控制。
这些input都包含在一个id为CheckBoxList1的table中，因此可以通过：
复制代码 代码如下:
document.getElementById("CheckBoxList1").getElementsByTagName("input").length
这一方法获取CheckBoxList一共有多少项，剩下的工作其实就很简单了，通过js更改每一个
checkbox的状态即可。先添加三个button，用来实现全选、反选及清除控制，如下所示：
复制代码 代码如下:
<inputtype="button"onclick="checkAll()"value="checkAll"/>
<inputtype="button"onclick="ReverseAll()"value="ReverseAll"id="Button1"/>
<inputtype="button"onclick="deleteAll()"value="deleteAll"/>
添加全选、反选及清除函数如下：
复制代码 代码如下:
functioncheckAll(){
//alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length);
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
document.getElementById("CheckBoxList1_"+i).checked=true;
}
}
functiondeleteAll(){
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
document.getElementById("CheckBoxList1_"+i).checked=false;
}
}
functionReverseAll(){
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
{
varobjCheck=document.getElementById("CheckBoxList1_"+i);
if(objCheck.checked)
objCheck.checked=false;
else
objCheck.checked=true;
}
}
OK，现在通过IE测试，绑定工作可以在后台，全选等辅助功能可以自由发挥了！
相关文章
有时候我们希望临时让某个分类或者多个文章不能正常访问，手动给html文件改名？或者改后台改程序？太麻烦了。用本文的js代码很容易实现，而且使用得当很隐蔽。这篇文章主要介绍了js（jquery）实现无刷新跳转404页面不存在效果,需要的朋友可以参考下2023-04-04
最近有朋友问我node环境和浏览器的区别这一问题，今天小编就抽空给大家介绍下Node环境和浏览器的区别，感兴趣的朋友一起看看吧2018-08-08
本文主要介绍了基于javascript实现的购物商城商品倒计时实例，代码详细，可直接复制试试看效果。需要的朋友可以参考借鉴2016-12-12
这篇文章主要给大家介绍了关于前端无感刷新token的实现步骤,Axios无感知刷新令牌技术通过设置请求拦截器和刷新逻辑,确保API请求不会因令牌过期而中断,使用访问令牌和刷新令牌实现自动刷新,需要的朋友可以参考下2024-11-11
这篇文章主要为大家详细介绍了微信小程序canvas实现环形渐变，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
今天小编就为大家分享一篇解决bootstrap中下拉菜单点击后不关闭的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了Canvas drawImage方法实现图片压缩详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
浅谈layui 绑定form submit提交表单的注意事项
今天小编就为大家分享一篇浅谈layui 绑定form submit提交表单的注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
js数组的用法包括创建、取值赋值、添加以及根据下标(数值或字符)移除元素等等，在本文将为大家详细介绍下，感兴趣的朋友可以参考下2013-10-10
这篇文章主要介绍了原生JS如何实现相邻月份日历，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-10-10
最新评论