`
ch_kexin
  • 浏览: 903065 次
  • 性别: 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>

分享到:
评论

相关推荐

    checkbox的全选与取消

    全选和取消功能通常用于表格或者列表中,让用户能够便捷地操作大量选项。 首先,我们来看看复选框的基本结构。在HTML中,复选框通过`&lt;input&gt;`标签来创建,类型设置为"checkbox": ```html &lt;input type="checkbox" ...

    winform DataGridView表头带CheckBox全选

    在这个特定的场景中,我们关注的是如何在`DataGridView`的表头添加一个`CheckBox`,以便实现全选和全不选的功能。这将大大提升用户体验,使得用户可以快速地对所有行进行操作,如批量删除、更新等。 首先,我们需要...

    checkbox实现全选和反选经典例子

    在高级控件如DataGridView中,通过结合Checkbox可以实现全选和反选功能,为用户提供便捷的操作方式。这个经典例子将深入探讨如何在Web应用中实现这一功能。 1. **Checkbox基本概念** Checkbox是HTML中的一个表单...

    Recyclerview item上CheckBox,包括全选,取消全选,单选功能

    为了实现全选和取消全选功能,我们需要在Adapter或Activity中添加两个方法:`selectAll`和`deselectAll`。`selectAll`将所有item的选中状态设为true,`deselectAll`则设为false。同时,我们需要更新`isAllSelected`...

    JQuery实现checkbox的全选取消全选

    在IT领域,特别是前端开发中,使用jQuery来操作DOM元素是一种常见的实践,特别是在处理复选框(checkbox)的全选与取消全选功能时。本文将深入解析如何使用jQuery实现这一功能,通过分析给定代码片段,提炼出关键...

    vue+elementui实现下拉框增加checkbox并可全选或取消(完整案例及效果图).zip

    在这个特定的案例中,我们关注的是如何使用Element UI来实现一个带有复选框(checkbox)的下拉框(select),并且支持全选和取消全选的功能。下面将详细介绍这一功能的实现步骤和关键知识点。 首先,我们需要在项目...

    CheckBox实现多选、全选、反选功能

    本教程将深入探讨如何使用CheckBox实现多选、全选和反选功能,这对于构建具有选择列表的应用非常关键。 首先,我们从基础开始。CheckBox的用法很简单,通常在XML布局文件中定义: ```xml &lt;CheckBox android:id="@...

    DataGridView表头添加checkbox实现全选反选

    当我们需要在数据表中实现多选功能时,通常会在表头添加一个`Checkbox`,以实现全选或反选所有行的功能。这个过程涉及到事件处理、控件交互以及UI设计等多个方面的知识点。 首先,我们需要在`DataGridView`的表头行...

    CheckBox实现多选列表,并实现全选、反选功能

    本文将深入探讨如何使用CheckBox来创建一个多选列表,并实现全选和反选的功能。这些功能常见于各种应用,如设置菜单、购物车等,使得用户可以方便地进行多项操作。 首先,我们需要一个ListView来展示列表项。...

    Checkbox全选问题

    HtML javascritp checkbox 全选HtML javascritp checkbox 全选

    WPF之CheckBox组的全选设计

    在设计一个CheckBox组时,可能会遇到需要实现全选功能的需求,即点击一个主CheckBox可以同时选择或取消选择所有子CheckBox。这个功能的实现涉及到位运算和枚举的Flags特性,这两个是C#编程中的重要概念。 **位运算*...

    C# Winform DatagridView 分页及 全选/ 取消全选 功能

    在提供的文档“实现DataGridView的分页及全选取消全选的功能.doc”中,应该包含了具体代码示例和操作流程,包括如何创建和绑定事件,以及如何处理数据加载。建议仔细阅读文档,以便更好地理解和应用这些概念。 总之...

    三种方式实现checkbox全选,反选

    在实际项目中,这三种方法都可以有效地实现Checkbox全选和反选功能。选择哪种方法主要取决于项目需求、性能考虑以及开发者的偏好。对于小型项目,前两种纯JavaScript的方法足够;对于大型项目,结合服务器端处理可能...

    javascript 实现复选框全选/取消功能

    ### JavaScript 实现复选框全选/取消功能 在网页开发中,经常需要用到复选框全选或取消的功能。本文将详细介绍如何通过JavaScript实现这一功能,并解析提供的代码片段。 #### 1. 功能概述 本功能的目标是实现一个...

    在DataGrid中使用CheckBox,实现全选功能

    这篇博客“在DataGrid中使用CheckBox,实现全选功能”详细介绍了如何实现这一需求。 首先,我们需要在DataGrid的列定义中添加一个CheckBox列。在WPF中,可以使用DataGridTemplateColumn来自定义列模板,将CheckBox...

    WPF CheckBox全选、反选比较通用

    本教程将详细介绍如何在WPF中实现CheckBox的全选和反选功能。 首先,我们需要理解CheckBox的基本用法。在XAML中,我们可以创建一个CheckBox并为其设置文本和初始状态: ```xml &lt;CheckBox Content="全选" x:Name=...

    简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解

    本案例主要关注如何利用CSS实现简约时尚的样式,并结合HTML中的`checkbox`元素实现全选/取消全选功能以及获取选中项的数量。以下是对这些知识点的详细说明: 一、CSS基础与美化`checkbox` 1. CSS选择器:通过类选择...

    flex在DataGrid中实现checkbox全选或取消

    本文将深入探讨如何在Flex中的DataGrid组件中实现复选框的全选与取消全选功能,这对于数据操作和用户交互至关重要。 在Flex的DataGrid组件中,我们通常会遇到这样的需求:当用户需要对多条记录进行批量操作时,如...

    WPF在dataGrid中添加CheckBox支持单选,多选,全选功能

    项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选、全选。 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellControlTemplate,Binding, OnPropertyChanged等。

    微信小程序实现多选框全选与取消全选功能示例

    在微信小程序中,实现多选框(Checkbox)的全选与取消全选功能是一项常见的需求,主要用于批量操作或数据筛选。下面将详细讲解如何通过JavaScript(JS)、WXML(微信小程序的XML标记语言)和WXSS(微信小程序的CSS...

Global site tag (gtag.js) - Google Analytics