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

阅读 52

2023-04-07


使用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="全选" οnclick="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>

精彩评论(0)

0 0 举报