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完成,看看效果:
准备好一个对象:
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完成,看看效果: