快捷導(dǎo)航

CheckBox為CheckBoxList實(shí)現(xiàn)全選或全取消選擇(js代碼實(shí)現(xiàn))

更新時(shí)間：2013年01月23日 10:07:51 作者：

在管理商品后臺(tái)是，由于CheckBoxList的選擇太多，用戶需要一個(gè)全選或全取消的功能，這樣操作起來(lái)會(huì)提高效率同時(shí)可以減少誤點(diǎn)等，本文將教大家如何實(shí)現(xiàn)，有需要的朋友可以參考下，望本文對(duì)你有所幫助

某一個(gè)時(shí)候，CheckBoxList的選擇太多，用戶需要一個(gè)全選或全取消的功能。下面使用Javascript來(lái)實(shí)現(xiàn)它。
準(zhǔn)備好一個(gè)對(duì)象：
MusicType

復(fù)制代碼代碼如下:

 
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; 
} 
} 
} 

填充對(duì)象：

復(fù)制代碼代碼如下:

 
public List<MusicType> GetMusicType() 
{ 
List<MusicType> mt = new List<MusicType>(); 
mt.Add(new MusicType(1, "甜密情歌")); 
mt.Add(new MusicType(2, "網(wǎng)絡(luò)紅歌")); 
mt.Add(new MusicType(3, "兒童歌曲")); 
mt.Add(new MusicType(4, "民族精選")); 
mt.Add(new MusicType(5, "校園歌曲")); 
mt.Add(new MusicType(6, "搖滾音樂(lè)")); 
mt.Add(new MusicType(7, "胎教音樂(lè)")); 
mt.Add(new MusicType(8, "紅色名曲")); 
mt.Add(new MusicType(9, "串燒金曲")); 
mt.Add(new MusicType(10, "動(dòng)慢歌曲")); 
return mt; 
} 

在站點(diǎn)建一個(gè)aspx網(wǎng)頁(yè)，并拉兩個(gè)控件，一個(gè)是CheckBox和CheckBoxList:

復(fù)制代碼代碼如下:

 
全選<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> 

接下來(lái)，我們?yōu)镃heckBoxList綁定數(shù)據(jù)：

復(fù)制代碼代碼如下:

 
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 (); 
} 
} 

最后是寫(xiě)Javascript代碼：

復(fù)制代碼代碼如下:

 
<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> 