使用ASP.NET或Javascript全选/取消全选CheckBoxList的所有项
ASP.NET 2.0 中的CheckBoxList控件提供了一组checkbox，这组checkbox可以通过绑定数据源的方式动态产生。
本文将会展示如何通过使用Checkboxlist控件，并且配合使用ASP.NET或Javascript选择/取消这个CheckBoxList中的所有项.
使用ASP.NET
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返回一个sqldatareader里customerid和customername项的列表
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 button的click事件中，添加如下代码:
// 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> | <a id="A2" href="#">None</a>
<asp:CheckBoxList ID="cbl2" runat="server"></asp:CheckBoxList><br />
Select <a id="A3" href="#">All</a> | <a id="A4" href="#">None</a>
Step 5: 像下面一样在链接标签中增加点击事件。
在这个事件中，我们将会调用javascript 函数，传递各自的checkboxlist控件和状态两个参数。其中状态‘true’ 或者 ‘false’是指checkbox是否选中的状态。
最终代码如下：
<asp:CheckBoxList ID="cbl1" runat="server"></asp:CheckBoxList><br />
Select <a id="A1" href="#" onclick="javascript: CheckBoxListSelect ('<%= cbl1.ClientID %>',true)">All</a>
| <a id="A2" href="#" onclick="javascript: CheckBoxListSelect ('<%= cbl1.ClientID%>',false)">None</a>
<br />
<br />
<asp:CheckBoxList ID="cbl2" runat="server">
</asp:CheckBoxList>
Select <a id="A3" href="#" onclick="javascript: CheckBoxListSelect ('<%= cbl2.ClientID %>',true)">All</a>
| <a id="A4" href="#" onclick="javascript: CheckBoxListSelect ('<%= cbl2.ClientID%>',false)">None</a>
Step 6: 最后添加javascript函数到子页面.
在子页面中添加<script/>标签，然后将逻辑写到这个标签里的函数中，如下：
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script language="javascript" type="text/javascript">
function CheckBoxListSelect(cbControl, state)
{
var chkBoxList = document.getElementById(cbControl);
var chkBoxCount= chkBoxList.getElementsByTagName("input");
for(var i=0;i<chkBoxCount.length;i++)
{
chkBoxCount[i].checked = state;
}
return false;
}
</script>
// ASP.NET Controls are placed here
</asp:Content>
在这个javascript函数中，根据需要，每个checkbox我们接收两个参数checkboxlist 控件和状态 (i.e true or false).
因为asp.net 将每个checkbox显示成一个input的表情，我们真正要做的就是通过document.getElementById(cbControl)获得checkboxlist控件，然后计算input标签的数量。
得到数量后，我们使用循环来设置每个控件的状态。
Step 7: 运行程序全选取消checkbox组，效果如下。
编程愉快。
源代码下载：CheckUncheckAll
原文出处： http://www.dotnetcurry.com/ShowArticle.aspx?ID=77
浙公网安备 33010602011771号