CheckBox.aspx
主要包含一個GridView,裡麵包含了我們要折騰的CheckBox,還有一大~~~~堆的javascript,當然也還是我們折騰的重要手段,只是目標基本已經換成了GridView中的CheckBox,和GridView本身並沒有太大關係
<%@ 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}' 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="選擇" onclick="CheckThem()" /></p>
<p>當從上面GridView中選擇或取消選擇一項時,“已選擇的項”中會自動更新為當前所有選中項的ID。</p>
<p>在“要選擇的項”裡填寫要選擇的項的ID(ID間用英文逗號分隔),點擊“選擇”可自動選中要選擇的項。</p>
</form>
<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;
}
}
}
}
</script>
</body>
</html>
CheckBox.aspx.cs
還是用來產生測試資料的,不然前面的GridView裡沒東西,就沒得折騰了
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, "丁學", "用javascript/css實現GridView行背景色交替、點擊行變色", "*************",
"**********************************************************************");
dt.Rows.Add(1, "丁學", "突發奇想--有關微軟未來", "2008-05-11 09:59",
"http://www.cnblogs.com/dingxue/archive/2008/05/11/1191936.html");
dt.Rows.Add(2, "丁學", "可愛的google翻譯,笑死我了", "2008-05-11 09:07 ",
"http://www.cnblogs.com/dingxue/archive/2008/05/11/1191900.html");
dt.Rows.Add(3, "丁學", "模板修改後重新發布", "2008-04-26 07:22",
"http://www.cnblogs.com/dingxue/archive/2008/04/26/1171778.html");
dt.Rows.Add(4, "丁學", "想買啥 VS 買了啥!理想與現實的差距咋就這麼大咧?", "2008-04-13 07:39",
"http://www.cnblogs.com/dingxue/archive/2008/04/13/1150952.html");
dt.Rows.Add(5, "丁學", "XHTML/CSS記憶力大測試,兩項都超過我,我請你吃飯!", "2008-04-03 06:40",
"http://www.cnblogs.com/dingxue/archive/2008/04/03/xhtml_css_test.html");
dt.Rows.Add(6, "丁學", "Designer VS Coder, who is the winner?", "2008-03-26 07:44",
"http://www.cnblogs.com/dingxue/archive/2008/03/26/coder_vs_designer.html");
dt.Rows.Add(7, "丁學", "用DIV類比快顯視窗--表單滾動跟隨--丁學", "2007-09-03 08:42",
"http://www.cnblogs.com/dingxue/archive/2007/09/03/879654.html");
dt.Rows.Add(8, "丁學", "一個簡單但常用的表格樣式--滑鼠划過行變色--簡潔實現", "2007-08-09 07:12",
"http://www.cnblogs.com/dingxue/archive/2007/08/09/848555.html");
dt.Rows.Add(9, "丁學", "關於IE7關閉視窗時總是提示和上傳圖片前的本地預覽解決辦法", "2007-06-19 08:50",
"http://www.cnblogs.com/dingxue/archive/2007/06/19/788449.html");
dt.Rows.Add(10, "丁學", "IE對input元素onchange事件的支援BUG", "2007-03-23 07:54",
"http://www.cnblogs.com/dingxue/archive/2007/03/23/684807.html");
dt.Rows.Add(11, "丁學", "由驗證控制項引起的IE的超級爆笑BUG", "2007-03-22 07:35",
"http://www.cnblogs.com/dingxue/archive/2007/03/22/683401.html");
dt.Rows.Add(12, "丁學", "DIV中捲軸設定到隨機位置(CSS+Javascript)", "2007-03-18 12:17",
"http://www.cnblogs.com/dingxue/archive/2007/03/18/678839.html");
dt.Rows.Add(13, "丁學", "ASP.NET AJAX1.0嘗鮮試用:Web Service調用", "2007-03-17 17:36",
"http://www.cnblogs.com/dingxue/archive/2007/03/17/678383.html");
dt.Rows.Add(14, "丁學", "ASP.NET中利用利用Skin引入CSS的問題", "2007-03-17 17:30",
"http://www.cnblogs.com/dingxue/archive/2007/03/17/678374.html");
//將DataTable綁定到GridView
gvMeiMingZi.DataSource = dt;
gvMeiMingZi.DataBind();
}
}