GridView与javascript、checkbox

a.aspx

<asp:GridView runat="server" 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="Title" HeaderText="Title" />

</Columns>

</asp:GridView>

<p>

已选择的项:<input type="text" size="60" /></p>

<p>

要选择的项:<input type="text" size="60"

onclick="CheckT()" />

</p>

<script type="text/javascript">

//先获取到所有的checkbox再说

var chkList=document.getElementsByName("chk");

//页面完全载入后,在window对象上触发的onload事件,可以在body上分配

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 CheckT()

{

var checkingList=document.getElementById("checking").value;

//没有输入就直接返回

if(checkingList.length==0)

{return;}

//获取所有想要选择项的ID

var checkingIds=checkingList.split(",");

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;

}

}

}

};

</script>

a.aspx.cs

//生成DataTable并添加相应的列

DataTable dt = new DataTable();

dt.Columns.Add("ID");

dt.Columns.Add("Title");

//测试数据填充

dt.Rows.Add(1, "1111");

dt.Rows.Add(2, "2222");

dt.Rows.Add(3, "3333");

dt.Rows.Add(4, "4444");

//将DataTable绑定到GridView

GridView1.DataSource = dt;

GridView1.DataBind();

------------

注:以上参考了网络文章