欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-03-05 17:44:37
某一个时候,checkboxlist的选择太多,用户需要一个全选或全取消的功能。下面使用javascript来实现它。 准备好一个对象: musictype 复制代码 代码...
某一个时候,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代码实现)