`
ch_kexin
  • 浏览: 875652 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

单击头模板中的checkbox,实现datalist中所有chebox的全选和取消

    博客分类:
  • .NET
阅读更多



使用C#和javascript都可以实现,第二种更好一些,页面不用总是刷新。只是想对.net学得更深入,所以两种方法都尝试了。

1、用c#实现:

aspx文件:

            <asp:DataList ID="dlistNews" runat="server" >
            <HeaderTemplate><table>
            <tr><td>
                <asp:CheckBox ID="chkAll" runat="server"  Text="全选" OnCheckedChanged="chkAll_CheckedChanged"  AutoPostBack="True"  /></td> </tr>
            </HeaderTemplate>
            <FooterTemplate></table></FooterTemplate>
            <ItemTemplate>            <tr><td>
                <asp:CheckBox ID="chk" runat="server"  /></td>。。。。
            </ItemTemplate>
        </asp:DataList>

响应函数:   

protected void chkAll_CheckedChanged(object sender, EventArgs e)
    {
      
            if (((CheckBox)sender).Checked==true)
            {

                foreach (DataListItem j in dlistNews.Items)
                {
                    CheckBox cb = (CheckBox)j.FindControl("chk");
                    cb.Checked = true;
                }
            }
            else
            {
                foreach (DataListItem j in dlistNews.Items)
                {
                    CheckBox cb = (CheckBox)j.FindControl("chk");
                    cb.Checked = false;
                }
            }       
  }

开始时不懂用((CheckBox)sender).Checked来获取chkAll的值,通过listItem的FindControl来查找,无论如何都找不到,查了很久才发现在listItem中查找的只是Itemtemplate中的控件,在headertemplate和footertemplate中的必须用其他方法。

查找headertemplate的:((CheckBox)dlistNews.Controls[0].FindControl("chkAll"))。这样也可以得到chkAll的值。

查找footertemplate的:((CheckBox)dlistNews.Controls[dlistNews.Controls.Count - 1].FindControl("chkAll"))

2、用javascript实现

把chkAll的属性修改为:<asp:CheckBox ID="chkAll" runat="server"  Text="全选" onclick="SelectAll(this) "    AutoPostBack="False"  />

    <script type="text/javascript" language="javascript">
    function SelectAll(box)
    {
      var table = document.getElementById("dlistNews");   //获得datalist

      var checkes =table.getElementsByTagName("input");

     for(var i=0;i<checkes.length;i++)
      {
           if(box.checked == true)
            {
                if(checkes[i].type=="checkbox")
                {
                    checkes[i].checked=true;
                }
            }
            else
            {
                if(checkes[i].type=="checkbox")
                {
                   checkes[i].checked=false;
                }
            }
      }
</script>

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics