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

某一个时候，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完成，看看效果：