<%--author wangaihui--%>
<%--date 2008-8-10--%>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
//服务器端全部选中或取消
protected void Button1_Click(object sender, EventArgs e)
{
foreach (Control c in this.form1.Controls)
{
if (c is CheckBox)
{
((CheckBox)c).Checked = !((CheckBox)c).Checked;
}
}
if (this.Button1.Text == "全部选中")
{
this.Button1.Text = "取消全选";
}
else
{
this.Button1.Text = "全部选中";
}
}
//服务器端得到全部选中的名字
protected void Button2_Click(object sender, EventArgs e)
{
int count = 0;
foreach (Control c in this.form1.Controls)
{
if (c is CheckBox)
{
if ((c as CheckBox).Checked)
{
count++;
this.TextBox1.Text += c.ID.ToString() + "; ";
}
}
}
this.TextBox1.Width = count * 100;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" type="text/javascript">
//客户端全部选中或取消
function mySelect()
{
//如果客户端不支持javascript则交到服务器端处理
if(!document.getElementById)
{
return true;
}
var inputList=document.getElementsByTagName('input');
for(var i=0;i<inputList.length;i++)
{
if(inputList[i].type=="checkbox")
{
inputList[i].checked=!inputList[i].checked;
}
}
var button1= document.getElementById("Button1");
if(button1.value=='全部选中')
{
button1.value='全部取消';
}
else
{
button1.value='全部选中';
}
return false;
}
//客户端得到全部选中的名字
function mySelectCheckBoxName()
{
//如果客户端不支持javascript则交到服务器端处理
if(!document.getElementById)
{
return true;
}
var inputList=document.getElementsByTagName('input');
var namelist='';
var count=0;
for(var i=0;i<inputList.length;i++)
{
if(inputList[i].type=="checkbox")
{
if(inputList[i].checked)
{
namelist+=inputList[i].name+"; ";
count++;
}
}
}
var textBox1= document.getElementById("TextBox1");
textBox1.value=namelist;
//有可能textBox1的长度不够长所以根据选中的个数让它自动增长
textBox1.setAttribute('width',100*count);
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<table>
<tr>
<td colspan="6">
please select your love:</td>
</tr>
<tr>
<td style="width: 100px">
dancing</td>
<td style="width: 100px">
<asp:CheckBox ID="CheckBox1" runat="server" Text=" " /></td>
<td style="width: 100px">
song</td>
<td style="width: 100px">
<asp:CheckBox ID="CheckBox2" runat="server" Text=" " /></td>
<td style="width: 100px">
sport</td>
<td style="width: 100px">
<asp:CheckBox ID="CheckBox3" runat="server" Text=" " /></td>
</tr>
<tr>
<td style="width: 100px">
tour</td>
<td style="width: 100px">
<asp:CheckBox ID="CheckBox4" runat="server" Text=" " /></td>
<td style="width: 100px">
music</td>
<td style="width: 100px">
<asp:CheckBox ID="CheckBox5" runat="server" Text=" " /></td>
<td style="width: 100px">
party</td>
<td style="width: 100px">
<asp:CheckBox ID="CheckBox6" runat="server" Text=" " /></td>
</tr>
</table>
<br />
<br />
<asp:Button ID="Button1" runat="server" OnClientClick="return mySelect();" OnClick="Button1_Click" Text="全部选中" />
<br />
<asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>
<br />
<asp:Button ID="Button2" OnClientClick="return mySelectCheckBoxName();" runat="server" Text="选中的CheckBox的名子" OnClick="Button2_Click" /><br />
</div>
</div>
</form>
</body>
</html>