Repeater中实现CheckBox的全选/反选/取消

最新推荐文章于 2024-05-31 09:45:22 发布

iloveyoupk

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量558

点赞数

文章标签： button server object xhtml html class

PageA.aspx:

程序代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageA.aspx.cs" Inherits="_PageA" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Repeater中实现CheckBox的全选/反选/取消-Mzwu.Com</title>
    <style type="text/css">

</style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server" Text='<%# Eval("age") %>'></asp:Label>
                <asp:CheckBox ID="CheckBox1" runat="server" /><br />
            </ItemTemplate>
        </asp:Repeater>
        <asp:Button ID="Button1" runat="server" Text="反选" OnClick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="全选" OnClick="Button2_Click" />
        <asp:Button ID="Button3" runat="server" Text="取消" OnClick="Button3_Click" />
    </div>

    </form>
</body>
</html>

PageA.aspx.cs:

程序代码

using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

public partial class _PageA : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //必须将绑定放在!IsPostBack中,否则每次按钮点击后都重新绑定
        //这样无论CheckBox选择与否,结果Checked值都为false,导致反选按钮失效
        if (!IsPostBack)
        {
            List<Student> classa = new List<Student>();

            Student aa = new Student("Stu1", 20);
            Student bb = new Student("Stu2", 21);
            Student cc = new Student("Stu3", 22);
            Student dd = new Student("Stu4", 23);

            classa.Add(aa);
            classa.Add(bb);
            classa.Add(cc);
            classa.Add(dd);

            Repeater1.DataSource = classa;
            Repeater1.DataBind();
        }

    }

    /// <summary>
    /// 反选
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Button1_Click(object sender, EventArgs e)
    {
        CheckBox checkBox;

        for (Int32 i = 0; i < Repeater1.Items.Count; i++)
        {
            checkBox = (CheckBox)Repeater1.Items[i].FindControl("CheckBox1");
            checkBox.Checked = ! checkBox.Checked;
        }

    }

    /// <summary>
    /// 全选
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Button2_Click(object sender, EventArgs e)
    {
        CheckBox checkBox;

        for (Int32 i = 0; i < Repeater1.Items.Count; i++)
        {
            checkBox = (CheckBox)Repeater1.Items[i].FindControl("CheckBox1");
            checkBox.Checked = true;
        }
    }

    /// <summary>
    /// 取消
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    protected void Button3_Click(object sender, EventArgs e)
    {
        CheckBox checkBox;

        for (Int32 i = 0; i < Repeater1.Items.Count; i++)
        {
            checkBox = (CheckBox)Repeater1.Items[i].FindControl("CheckBox1");
            checkBox.Checked = false;
        }
    }
}

根据这个思路要对GridView、DataList中的CheckBox进行全选/反选/取消也很简单了，就是遍历所有行的方法不太一样而已。

说明

1.如注释中说的，数据绑定一定要放在!IsPostBack中进行，否则每次都会重新绑定数据，导致不论之前选择与否，Checked的值都为false，反选按钮失效每次都是全选！

2.Items集合包含的是ItemTemplate模板中的内容，不包含HeaderTemplate和FooterTemplate模板中的内容！GridView、DataList都是这样的！

附：各数据绑定控件获遍历行方法

GridView：GridView1.Rows[n]
DataList：DataList1.Items[n]
Repeater：Repeater1.Items[n]

iloveyoupk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Repeater中实现CheckBox的全选/反选/取消

PageA.aspx: 程序代码 Repeater中实现CheckBox的全选/反选/取消-Mzwu.Com body, td, th { font-size: 12px;}--> > >
复制链接

扫一扫