ASP.NET 使用JS達到Shift鍵加滑鼠左鍵讓Table中的CheckBox連續選取

這個需求是要模仿電子信箱中的CheckBox(我是參考GMail)，勾選了第1筆之後，Shift鍵+滑鼠左鍵勾選第2筆，可以勾選我們要的多筆資料，稱這種功能為「連續選取」(我沒說錯吧)。
如果有想嘗試的人，可以先去我的前一篇(ASP.NET Table中的刪除按鈕，顯示2次提示訊息)複製SQL CREATE TABLE指令先建立資料表，所以後端程式碼我就不貼出來了，因為差不多一樣，只是這次的重點在JavaScript怎麼達到連續選取的功能，說明都寫在註解中。

test_gv_checkbox.aspx
前端
<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/MasterPage1.master" CodeBehind="test_gv_checkbox.aspx.vb" Inherits="test_gridview_dialog.test_gv_checkbox" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <style type="text/css">
        /*test_gv_dialog.aspx 只要是要使用在這個網頁的css都寫在此處*/
        /*設定CheckBox大小，套用的對象有2個
          1.只要是input的checkbox都套用。
          2.因為GridView的CheckBox CssClass屬性有設定CSS，經過轉譯後CheckBox會被span標籤包起來，
            所以只要是span標籤class是rowcb底下的CheckBox都套用。
        */
        input[type="checkbox"], span[class="rowcb"]>input[type="checkbox"]{
          width: 20px;
          height: 20px;
        }
    </style>
    <script type="text/javascript">
        //test_gv_dialog.aspx JavaScript只要是要使用在這個網頁的JavaScript都寫在此處
        var shiftkeydown = false; //紀錄使用者目前有沒有按下Shift鍵
        $(document).ready(function () {
            //只要是CSS類別名稱為GV1_headcb，底下的CheckBox就註冊change事件
            $('.GV1_headcb > input[type="checkbox"]').change(function () {
                var bool_change;
                bool_change = this.checked; //取得自己勾選狀態
                //table底下的tbody底下的tr CheckBox透過each(類似迴圈)，將table中所有的CheckBox設定為勾選或取消勾選
                $('#<%=GridView1.ClientID %> > tbody > tr input[type="checkbox"]').each(function () {
                    $(this).prop('checked', bool_change); //設定CheckBox狀態
                });
            });
            //註冊keydown keyup事件，function名稱為listening_for_shift
            $(document).on('keydown keyup', listening_for_shift);
            //為GridView註冊change事件，對象是所有的CheckBox
            $('#<%=GridView1.ClientID %>').on('change', 'input[type="checkbox"]', function () {

                var this_checked_index = $(this).closest('tr').index(); //取得使用者勾選哪一個checkbox tr index
                var str_hfval=$('#<%=HF_cbindex.ClientID%>').val(); //取得使用者上一次點了哪一個CheckBox

                //當使用者按下shift 且 大於0(不包含GridView table head中CheckBox)
                if (shiftkeydown == true && this_checked_index > 0) {
                    var before_index;
                    if (str_hfval != '') {
                        var re = /^[0-9]+$/;
                        if (!re.test(str_hfval)) {
                            return false; //不是數字就中斷
                        };
                        before_index = parseInt(str_hfval);
                        if (before_index < this_checked_index) {
                            for (var i = before_index; i <= this_checked_index; i++) {
                                $('#<%=GridView1.ClientID %>').find('tr:eq(' + i + ') input[type="checkbox"]').prop('checked', true);
                            };
                        } else if (before_index > this_checked_index) {
                            for (var i = this_checked_index; i <= before_index; i++) {
                                $('#<%=GridView1.ClientID %>').find('tr:eq(' + i + ') input[type="checkbox"]').prop('checked', true);
                            };
                        };
                    };
                };

                if (this_checked_index > 0){
                    $('#<%=HF_cbindex.ClientID%>').val(this_checked_index); //紀錄目前使用者勾選哪一個checkbox tr index
                };
            });
        });
        function listening_for_shift(e) {
            if (e.keyCode == 16) {
                if (e.type === "keydown") {
                    //alert('down shift');
                    shiftkeydown = true;
                }
                if (e.type === "keyup") {
                    //alert('no shift');
                    shiftkeydown = false;
                }
            }
        };
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div class="container">
        <div class="row cust_blank1">
            <div class="col-xs-12">
                仿電子信箱中的CheckBox，勾選了第1筆之後，Shift鍵+滑鼠左鍵勾選第2筆，可以勾選我們要的多筆資料
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                    <Columns>
                        <asp:TemplateField HeaderText="">
                            <HeaderTemplate>
                                <asp:CheckBox ID="GV1_headcb" runat="server" CssClass="rowcb GV1_headcb"/>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:CheckBox ID="CheckBox1" runat="server" CssClass="rowcb" />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="編號">
                            <ItemTemplate>
                                <%# Eval("ser_no")%>
                                <asp:HiddenField ID="HF_serno" runat="server" Value='<%# Eval("ser_no")%>' />
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="標題">
                            <ItemTemplate>
                                <%# Eval("title")%>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="內容">
                            <ItemTemplate>
                                <%# Eval("cont")%>
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    <EmptyDataTemplate>
                        <asp:Label ID="GV_Empty" runat="server" Text="目前無資料"></asp:Label>
                    </EmptyDataTemplate>
                </asp:GridView>
                <asp:HiddenField ID="HF_cbindex" runat="server" />
            </div>
        </div>
    </div>
</asp:Content>

說明：重點要記錄使用者第1次點了哪一個CheckBox，當使用者點了第2次時，就可以知道使用者點的範圍到哪裡，來作連續勾選的動作。

以上如有錯誤請指證，謝謝。