ASP.NET与javascript操作CheckBox控件(转)-阿里云开发者社区

开发者社区> 老朱教授> 正文

ASP.NET与javascript操作CheckBox控件(转)

简介:
+关注继续查看

在网络开发中,经常遇到需要使用ASP.NET与JavaScript联合进行控制的情况。在本篇中,将使用DataGrid进行数据绑定,使用Javascript控制当选中其中的checkbox时,该行颜色改变。

首先,在页面中创建一个DataGrid控件,并设置其模板。

<asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False">
< Columns>
< asp:TemplateColumn>
< ItemTemplate>
< asp:CheckBox id="checkbox1" Runat ="server"></asp:CheckBox>
< asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem") %>'></asp:Label>
< /ItemTemplate>
< /asp:TemplateColumn>
< /Columns>
< /asp:DataGrid>

第二,在页面中的<head></head>中编写JavaScript脚本函数,进行CheckBox的判断和颜色改变的控制。

<script>
function checkme(obj,tr){
if(obj.checked)
tr.style.backgroundColor='blue';
else
tr.style.backgroundColor='';
}
</script>

第三,在Page_Load事件中为DataGrid绑定数据,并关联CheckBox的JavaScript脚本。

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
databind();
}
}
private void databind()
{
ArrayList arr=new ArrayList();
arr.Add("新闻综合");
arr.Add("综艺");
arr.Add("电影");
arr.Add("教育");
arr.Add("戏剧");
arr.Add("军事");
arr.Add("体育");
DataGrid1.DataSource=arr;
DataGrid1.DataBind();
int i;
for(i=0;i<DataGrid1.Items.Count;i++){
CheckBox cb;
cb=(CheckBox)DataGrid1.Items[i].FindControl("checkbox1");
DataGrid1.Items[i].Attributes.Add("id","tr" + i.ToString());
cb.Attributes.Add("onclick","checkme(this,tr" + i.ToString() + ");");
}
}

第四,完成之后运行程序。程序运行后,会在DataGrid控件的每行前显示一个CheckBox控件,选择该控件,该行背景颜色变蓝色,取消选择,该行颜色恢复初始状态。




本文转自钢钢博客园博客,原文链接http://www.cnblogs.com/xugang/archive/2007/09/04/881501.html,如需转载请自行联系原作者


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Elastic Engineering】Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
3 0
【Elastic Engineering】Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
Elasticsearch 中的一些重要概念: cluster, node, index, document, shards 及 replica
10 0
阿里巴巴数据库分库分表的实践(5)
阿里巴巴数据库分库分表的实践(5)
9 0
用阿里云飞天计划提供的CES服务器为高中生活搭建“故事簿”网页
一名刚踏入大学的大一本科生利用阿里云提供的CES服务器为高中“故事簿”搭建网页
16 0
飞天加速计划使用体验
对于云服务器的使用体验感受
18 0
ECS初体验的感受
ECS初体验的感受 云翼计划
16 0
使用阿里云ECS搭建个人网站
学习在ECS上如何搭建个人网站
27 0
我的历程分享
简述我的学习生涯
10 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载