首页 > 编程 > .NET > 正文

ASP.NET与JavaScript操作CheckBox控件

2024-07-10 13:08:56
字体:
来源:转载
供稿:网友
菜鸟学堂:

在网络开发中,经常遇到需要使用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控件,选择该控件,该行背景颜色变蓝色,取消选择,该行颜色恢复初始状态。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表