ASP.NET与JavaScript操作CheckBox控件

最新推荐文章于 2019-05-23 22:31:41 发布

ouweiguodead

最新推荐文章于 2019-05-23 22:31:41 发布

阅读量637

点赞数

分类专栏：技术文章文章标签： javascript asp.net datagrid asp 脚本体育

技术文章专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在网络开发中，经常遇到需要使用 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() + ");");
}
}

控件共享群    40662788 （满）
控件共享群1   45939285（满）
控件共享群2   45939346
控件共享群3   45939415