using System; using System.Data; public partial class CheckBox:System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //生成DataTable并添加相应的列 DataTable dt = new DataTable(); dt.Columns.Add("ID"); dt.Columns.Add("Author"); dt.Columns.Add("Title"); dt.Columns.Add("PostTime"); dt.Columns.Add("URL"); dt.Rows.Add(1, "fisea", "sdfef", "2009-05-11 09:59", "http://writeblog.csdn.net/PostEdit.aspx"); dt.Rows.Add(2, "fisea", "sdfef", "2009-05-11 09:59", "http://writeblog.csdn.net/PostEdit.aspx"); dt.Rows.Add(3, "fisea", "sdfef", "2009-05-11 09:59", "http://writeblog.csdn.net/PostEdit.aspx"); dt.Rows.Add(4, "fisea", "sdfef", "2009-05-11 09:59", "http://writeblog.csdn.net/PostEdit.aspx"); gvMeiMingZi.DataSource = dt; gvMeiMingZi.DataBind(); } } <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBox.aspx.cs" Inherits="CheckBox" %> <!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>CheckBox</title> </head> <body> <form id="form1" runat="server"> <asp:GridView runat="server" ID="gvMeiMingZi" AutoGenerateColumns="False"> <Columns> <asp:TemplateField> <ItemTemplate> <input name="chk" type="checkbox" value="<%#Eval("ID")%>" /> </ItemTemplate> </asp:TemplateField> <asp:BoundField DataField="ID" HeaderText="ID" /> <asp:BoundField DataField="Author" HeaderText="Author" /> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:BoundField DataField="PostTime" HeaderText="PostTime" /> <asp:BoundField DataField="URL" DataFormatString="<a href="{0}" mce_href="{0}" target='_blank'>点击打开</a>" HeaderText="Link" HtmlEncode="False" /> </Columns> </asp:GridView> <p>已选择的项:<input type="text" size="60" id="checked" /></p> <p>要选择的项:<input type="text" size="60" id="checking" /><input type="button" value="选择" οnclick="CheckThem()" /></p> <p>当从上面GridView中选择或取消选择一项时,“已选择的项”中会自动更新为当前所有选中项的ID。</p> <p>在“要选择的项”里填写要选择的项的ID(ID间用英文逗号分隔),点击“选择”可自动选中要选择的项。</p> </form> <mce:script type="text/javascript"><!-- //先获取到所有的checkbox再说 var chkList = document.getElementsByName("chk"); window.onload = function(){ //为所有checkbox添加onclick事件处理,以自动更新“已选择的项” for(var i=0; i<chkList.length; i++){ chkList[i].onclick = chkClick; } } //checkbox的onclick事件,用于更新“已选择的项” function chkClick(){ var checkedList = ""; //获取所有被选中的项 for(var i=0; i<chkList.length; i++){ if(chkList[i].checked) checkedList += chkList[i].value + ","; } //把选中项的列表显示到“已选择的项”中,substring在这里是为了去除最后一个逗号 document.getElementById("checked").value = checkedList.substring(0,checkedList.length-1); } //根据在“要选择的项”中的输入选中相应的项 function CheckThem(){ var checkingList = document.getElementById("checking").value; //没有输入就直接返回 if(checkingList.length==0){return;} //获取所有想要选择项的ID var checkingIds = checkingList.split(","); //设置选择状态,注意两个循环的顺序,如果把chkList放到内层,将不能保证总是取得正确结果 //因为如果输入了多个ID,后面的ID会把前面的正确结果给冲掉 for(var j=0; j<chkList.length; j++){ for(var i=0; i<checkingIds.length; i++){ if(checkingIds[i] == chkList[j].value){ chkList[j].checked = true; break; } else{ chkList[j].checked = false; } } } } // --></mce:script> </body> </html>