服务器之家

服务器之家 > 正文

CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

时间:2019-10-18 11:28     来源/作者:asp.net技术网

某一个时候,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完成,看看效果: 
CheckBox为CheckBoxList实现全选或全取消选择(js代码实现)

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
超A是什么意思 你好a表达的是什么
超A是什么意思 你好a表达的是什么 2019-06-06
返回顶部