用javascript操縱GridView中CheckBox的兩個常用技巧

作者: 丁學來源: 博客園發布時間: 2008-09-09 18:34 閱讀: 4746 次推薦: 0 原文鏈接 [收藏]

　　這篇文章同樣是為了解決一個博問中的提問：提問：關于JS讀取gridview,checkbox選擇情況。當然，下面的實現中，有一半是為解決這個問題而做的，另一半是很久前幫另一位朋友做的，同樣關于javascript對GridView中的CheckBox的操作，只是操作順序完全反過來了，不是獲取所有選擇的項，而是根據用戶的輸入，自動選擇選擇相應的項。

　　雖然是為了解決GridView中的CheckBox操縱問題，但實際上功能并不僅限于GridView中，稍加改動就可以用到其他的場景，甚至都不用改動（不知道有沒有這么好糊弄的客戶）

　　代碼依然帖在下面，比上一篇用javascript/css實現GridView行背景色交替、點擊行變色長了很多，不過我感覺注釋依然足夠詳細，所以也應該很容易理解，可以把下面兩個文件的代碼直接復制到你的項目中直接執行。最下面有文件的下載地址，可以直接下載后運行，代碼在IE7和Firefox2下測試通過，有任何問題，請在下面留言，我將盡量及時回復。

　　CheckBox.aspx
　　主要包含一個GridView，里面包含了我們要折騰的CheckBox，還有一大~~~~堆的javascript，當然也還是我們折騰的重要手段，只是目標基本已經換成了GridView中的CheckBox，和GridView本身并沒有太大關系

Code
<%@ 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里沒東西，就沒得折騰了

Code
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();
    }
}