CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)
更新时间：2013年01月23日 10:07:51 作者：
在管理商品后台是，由于CheckBoxList的选择太多，用户需要一个全选或全取消的功能，这样操作起来会提高效率同时可以减少误点等，本文将教大家如何实现，有需要的朋友可以参考下，望本文对你有所帮助
某一个时候，CheckBoxList的选择太多，用户需要一个全选或全取消的功能。下面使用Javascript来实现它。
准备好一个对象：
MusicType
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for MusicType
/// </summary>
namespace Insus.NET
{
public class MusicType
{
private int _ID;
private string _TypeName;
public int ID
{
get { return _ID; }
set { _ID = value; }
}
public string TypeName
{
get { return _TypeName; }
set { _TypeName = value; }
}
public MusicType()
{
//
// TODO: Add constructor logic here
//
}
public MusicType(int id, string typeName)
{
this._ID = id;
this._TypeName = typeName;
}
}
}
填充对象：
public List<MusicType> GetMusicType()
{
List<MusicType> mt = new List<MusicType>();
mt.Add(new MusicType(1, "甜密情歌"));
mt.Add(new MusicType(2, "网络红歌"));
mt.Add(new MusicType(3, "儿童歌曲"));
mt.Add(new MusicType(4, "民族精选"));
mt.Add(new MusicType(5, "校园歌曲"));
mt.Add(new MusicType(6, "摇滚音乐"));
mt.Add(new MusicType(7, "胎教音乐"));
mt.Add(new MusicType(8, "红色名曲"));
mt.Add(new MusicType(9, "串烧金曲"));
mt.Add(new MusicType(10, "动慢歌曲"));
return mt;
}
在站点建一个aspx网页，并拉两个控件，一个是CheckBox和CheckBoxList:
全选<asp:CheckBox ID="CheckBoxAll" runat="server" onClick="javascript:Check_Uncheck_All(this);" /><br />
<asp:CheckBoxList ID="CheckBoxListMusicType" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="300"></asp:CheckBoxList>
接下来，我们为CheckBoxList绑定数据：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Data_Binding();
}
private void Data_Binding()
{
this.CheckBoxListMusicType.DataSource = GetMusicType();
this.CheckBoxListMusicType.DataTextField = "TypeName";
this.CheckBoxListMusicType.DataValueField = "ID";
this.CheckBoxListMusicType.DataBind ();
}
}
最后是写Javascript代码：
<script type="text/javascript">
function Check_Uncheck_All(cb) {
var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");
var input = cbl.getElementsByTagName("input");
if (cb.checked) {
for (var i = 0; i < input.length; i++) {
input[i].checked = true;
}
}
else {
for (var i = 0; i < input.length; i++) {
input[i].checked = false;
}
}
}
</script>
ok完成，看看效果：
准备好一个对象：
MusicType
复制代码 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
/// <summary>
/// Summary description for MusicType
/// </summary>
namespace Insus.NET
{
public class MusicType
{
private int _ID;
private string _TypeName;
public int ID
{
get { return _ID; }
set { _ID = value; }
}
public string TypeName
{
get { return _TypeName; }
set { _TypeName = value; }
}
public MusicType()
{
//
// TODO: Add constructor logic here
//
}
public MusicType(int id, string typeName)
{
this._ID = id;
this._TypeName = typeName;
}
}
}
填充对象：
复制代码 代码如下:
public List<MusicType> GetMusicType()
{
List<MusicType> mt = new List<MusicType>();
mt.Add(new MusicType(1, "甜密情歌"));
mt.Add(new MusicType(2, "网络红歌"));
mt.Add(new MusicType(3, "儿童歌曲"));
mt.Add(new MusicType(4, "民族精选"));
mt.Add(new MusicType(5, "校园歌曲"));
mt.Add(new MusicType(6, "摇滚音乐"));
mt.Add(new MusicType(7, "胎教音乐"));
mt.Add(new MusicType(8, "红色名曲"));
mt.Add(new MusicType(9, "串烧金曲"));
mt.Add(new MusicType(10, "动慢歌曲"));
return mt;
}
在站点建一个aspx网页，并拉两个控件，一个是CheckBox和CheckBoxList:
复制代码 代码如下:
全选<asp:CheckBox ID="CheckBoxAll" runat="server" onClick="javascript:Check_Uncheck_All(this);" /><br />
<asp:CheckBoxList ID="CheckBoxListMusicType" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="300"></asp:CheckBoxList>
接下来，我们为CheckBoxList绑定数据：
复制代码 代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Data_Binding();
}
private void Data_Binding()
{
this.CheckBoxListMusicType.DataSource = GetMusicType();
this.CheckBoxListMusicType.DataTextField = "TypeName";
this.CheckBoxListMusicType.DataValueField = "ID";
this.CheckBoxListMusicType.DataBind ();
}
}
最后是写Javascript代码：
复制代码 代码如下:
<script type="text/javascript">
function Check_Uncheck_All(cb) {
var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>");
var input = cbl.getElementsByTagName("input");
if (cb.checked) {
for (var i = 0; i < input.length; i++) {
input[i].checked = true;
}
}
else {
for (var i = 0; i < input.length; i++) {
input[i].checked = false;
}
}
}
</script>
ok完成，看看效果：
相关文章
下面小编就为大家带来一篇GridView中日期不显示时分秒的完美解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看吧2016-05-05
这篇文章主要为大家介绍了ASP.net Core微信平台开发配置Token有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-04-04
这些内容是我在学习ASP.Net的时候对Page研究的一些心得，具体的细节没有很详细的探讨，更多的内容请大家参考MSDN，但是我举了一些初学者常犯的错误和出现错误的原因，希望可以给大家带来启发。2009-08-08
这篇文章主要为大家详细介绍了.net MVC中使用forms验证的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章介绍了.net项目使用日志框架log4net的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-02-02
在查询的场景中，还有一类需求不是很常见，就是在前端请求中指定返回的字段。所以这篇文章主要介绍了.NET 6如何实现数据塑形，需要的可以参考一下2022-01-01
这篇文章主要介绍了如何合并多个 .NET 程序集的方法，大家可能都听说过项 ILMerge, SmartAssembly, 等这样的工具.但是我想如果我们就能通过在编译时将所有这些源代码文件导入一个项目，来获得这些东西的一个完美组合.下面我们就来仔细探讨下。2015-03-03
高效的使用 Response.Redirect解决一些不必要的问题
这篇文章主要介绍了如何高效的使用 Response.Redirect解决一些不必要的问题,需要的朋友可以参考下2014-05-05
asp.net下用Aspose.Words for .NET动态生成word文档中的图片或水印的方法
本文详细讲解如何使用Aspose.Words for .NET的组件来生成word文档与水印的方法，请看本文内容。2010-04-04
如果是某个逻辑功能的定时，可以将code放到逻辑功能的类的静态构造函数中，在该逻辑类第一次执行时，静态构造函数会被调用，则定时自然启动2013-06-06
最新评论