• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

使用ASP.NET或Javascript全选/取消全选CheckBoxList的所有项

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

ASP.NET 2.0 中的CheckBoxList控件提供了一组checkbox,这组checkbox可以通过绑定数据源的方式动态产生。

本文将会展示如何通过使用Checkboxlist控件,并且配合使用ASP.NETJavascript选择/取消这个CheckBoxList中的所有项.

 

使用ASP.NET

Step 1: 打开 Visual Studio. 新建一个网站命名为CheckUncheckAll’,新建一个页面WebForm1.aspx,拖拽一个CheckBoxList 控件到这个页面. 重命名这个控件为‘cblMulti’.

Step 2: 添加完CheckBoxList,鼠标移上后,设计界面中会出现一个小三角提示标签,这个标签可以让你指定一个数据源或手动添加checkbox项到CheckBoxList中。

点击‘Edit Items’打开ListItem的集合编辑器,添加一些项,如下图所示:

备注: 如果你不想使用这个集合编辑器而是想通过编程的方式添加checkbox项。在Page load事件中添加如下代码即可。

protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            cblMulti.Items.Add(new ListItem("Items 1""Items 1"));

            cblMulti.Items.Add(new ListItem("Items 2""Items 2"));

            cblMulti.Items.Add(new ListItem("Items 3""Items 3"));

        }

    }

另外,你也可以像下面一样将checkbox list绑定到datareader:

// 假定GetListItems返回一个sqldatareadercustomeridcustomername项的列表

SqlDataReader dr = GetListItems();

cblMulti.DataSource = dr;

cblMulti.DataValueField = "cust_no";

cblMulti.DataTextField = "cust_name";

cblMulti.DataBind(); 

为了简便起见,在示例中我们通过编程的方式:在page load事件中通过使用cblMulti.Items.Add(new ListItem(text,value))增加checkbox项。

 

Step 3: 从工具箱中拖拽两个LinkButton到页面中,分别重命名为:‘lbAll’ ‘lbNone’

代码如下 :

<asp:LinkButton ID="lbAll" runat="server">Select All</asp:LinkButton>

<asp:LinkButton ID="lbNone" runat="server">Select None</asp:LinkButton>

 

Step 4: 双击这两个控件,为它们生成click事件。在这两个link buttonclick事件中,添加如下代码:

// Check All

    protected void lbAll_Click(object sender, EventArgs e)

    {

        foreach (ListItem li in cblMulti.Items)

        {

             li.Selected = true;

        }        

    }

 

    // Uncheck All

    protected void lbNone_Click(object sender, EventArgs e)

    {

        foreach (ListItem li in cblMulti.Items)

        {

            li.Selected = false;

        }

    }

 

Step 5 : 运行这个程序测试。点击‘Select All’可以一次选中所有的checkbox.类似的,点击‘Select None’可以一次取消所有的checkbox的选择。 

这样就完成了,运行效果如下:

 

 

使用Javascript

我们可以使用javascript实现同样的功能。在javascript例子中,我们给这个例子增加一些复杂性。

我们将会使用一个继承master page页面的例子,并且使用两个checkboxlist代替原来的一个添加到我们的页面中。步骤如下:

Step 1: 在刚才项目上新建一个母板页Site1.Master,新建一个带母板页的页面WebForm2.aspx.

        拖拽两个CheckBoxList 控件到这个页面。重命名控件为:‘cbl1’ ‘cbl2’.

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <asp:CheckBoxList ID="cbl1" runat="server">

    </asp:CheckBoxList><br />

    <asp:CheckBoxList ID="cbl2" runat="server">

    </asp:CheckBoxList>

</asp:Content>

 

Step 2: Page_Load()事件中增加项到checkboxlist 控件中。

protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            cbl1.Items.Add(new ListItem("Items 1""Items 1"));

            cbl1.Items.Add(new ListItem("Items 2""Items 2"));

            cbl1.Items.Add(new ListItem("Items 3""Items 3"));

            cbl2.Items.Add(new ListItem("Items 4""Items 4"));

            cbl2.Items.Add(new ListItem("Items 5""Items 5"));

            cbl2.Items.Add(new ListItem("Items 6""Items 6"));

 

        }

    }

 

Step 3: 现在在这个页面中添加全选功能。再往下进行之前,我们先理解下如何传递MasterPage子页面中的控件到javascript函数中。

当页面在浏览器中被显示时,子页面和master page会合并成一个页面。这意味着控件的id会重新命名。

ASP.NET重命名这些id,这样可以避免命名冲突。为了处理这些重命名的控件,ASP.NET提供了两种方法获得这些经过重命名的控件,即‘Control.ClientID’ ‘Control.UniqueID’.

理解了这些后,我们就可以添加一些控件到页面中,然后使用Control.ClientID传递各个控件到javascript函数中。

我们的javascript函数原型如下:

function CheckBoxListSelect(<pass the control>, <state i.e true or false>)

{   

      // Our code will come here

}

 

Step 4: 在代码中各个checkboxlist下面增加两个链接标签,记住我们使用了两个CheckBoxList.

<asp:CheckBoxList ID="cbl1" runat="server"></asp:CheckBoxList><br />

Select <a id="A1" href="#">All</a> | <id="A2" href="#">None</a>

<asp:CheckBoxList ID="cbl2" runat="server"></asp:CheckBoxList><br />

Select <a id="A3" href="#">All</a> | <id="A4" href

该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
[导入]怎样从ASP.NET 2.0中读取连接字符串发布时间:2022-07-10
下一篇:
Asp.net 2.0的一些小心得 (二) ObjectDataSource的使用发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap