GridView中的CheckBox选中 （JQuery）

JQuery验证GridView中是否有CheckBox被选中

　　　　在GirdView中使用CheckBox,通常我们使用后台代码的方式判断是否至少有一个CheckBox是选中的状态。但是，这种验证在客户端的脚本中将更加容易实现，而且，页面的效果也非常好。网上有很多解决方案，以下提供我的解决方案，部分代码来源网上，经过我的修改和测试，很好用。“拿来主义”，忘了代码是在哪找到的，希望原作者谅解。

这是主要的实现代码：

    <script type="text/javascript" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');
                var DataKeyName = " ";
                //Get all of the checked item in the GridView
                $('#<%= cmdGetData.ClientID %>').click(function (e) {
                    //alert($('input:checkbox[id*=chkSelect]:checked').size());
                    var DataKeyName = "";
                    $('input:checkbox[id*=chkSelect]:checked', gridView1Control).each(function (item, index) {
                        if (DataKeyName == "") {
                            DataKeyName = $(this).next('input:hidden[id*=IDVal]').val();
                        }
                        else {
                            DataKeyName += "," + $(this).next('input:hidden[id*=IDVal]').val();
                        }
                    });
                    if ( DataKeyName == "" || DataKeyName ==","){
                        alert("No items are checked!");
                    }
                    else{
                        alert(DataKeyName);
                    }
                    return false;
                });
            });
        </script>
html 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Gridview CheckBox</title>
    <script type="text/javascript" language="javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var gridView1Control = document.getElementById('<%= GridView1.ClientID %>');
                var DataKeyName = " ";
                //Get all of the checked item in the GridView
                $('#<%= cmdGetData.ClientID %>').click(function (e) {
                    //alert($('input:checkbox[id*=chkSelect]:checked').size());
                    var DataKeyName = "";
                    $('input:checkbox[id*=chkSelect]:checked', gridView1Control).each(function (item, index) {
                        if (DataKeyName == "") {
                            DataKeyName = $(this).next('input:hidden[id*=IDVal]').val();
                        }
                        else {
                            DataKeyName += "," + $(this).next('input:hidden[id*=IDVal]').val();
                        }
                    });
                    if ( DataKeyName == "" || DataKeyName ==","){
                        alert("No items are checked!");
                    }
                    else{
                        alert(DataKeyName);
                    }

                    return false;
                });
            });
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style=" text-align:center;">
    <h1>Gridview using CheckBox</h1>
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" DataKeyNames="ID" HorizontalAlign="Center" >  
    <Columns>  
        <asp:TemplateField>  
            <ItemTemplate>  
                <asp:CheckBox ID="chkSelect" runat="server" />  
                <asp:HiddenField ID="IDVal" runat="server" Value='<%# Eval("ID") %>' />  
            </ItemTemplate>  
        </asp:TemplateField>  
        <asp:TemplateField>  
            <HeaderTemplate>  
                Name  
            </HeaderTemplate>  
            <ItemTemplate>  
                <asp:Label ID="Label1" runat="server" Text='<%# Eval("Name") %>'></asp:Label>  
            </ItemTemplate>  
        </asp:TemplateField>  
    </Columns>  
</asp:GridView>
<asp:Button ID="cmdGetData" runat="server" Text="Get Data" />   
    </div>
    </form>
</body>
</html>
vb.net 
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim dt As New DataTable()
        dt.Columns.Add("ID")
        dt.Columns.Add("Name")

        Dim oItem As DataRow
        oItem = dt.NewRow()
        oItem.Item("ID") = "1"
        oItem.Item("Name") = "Shawpnendu Bikash Maloroy"
        dt.Rows.Add(oItem)

        oItem = dt.NewRow()
        oItem.Item("ID") = "2"
        oItem.Item("Name") = "Bimalendu Bikash Maloroy"
        dt.Rows.Add(oItem)

        oItem = dt.NewRow()
        oItem.Item("ID") = "3"
        oItem.Item("Name") = "Purnendu Bikash Maloroy"

        dt.Rows.Add(oItem)

        GridView1.DataSource = dt
        GridView1.DataBind()
    End Sub

希望本篇文章对你有用

Happy Programming!!!

posted @ 2012-04-19 10:51  scogee  阅读(3134)  评论(1)  编辑  收藏  举报