Javascript / JQuery验证客户端Gridview中的单选按钮列表

时间:2013-12-25 10:28:19

标签: javascript jquery asp.net gridview

在我的网页中,我有一个GridView,每个网格视图行包含一个复选框和一列列表中的单选按钮,如代码所示。如果选中了复选框,则单选按钮将启用为true,如屏幕截图所示。在底部,我们有一个提交按钮来保存所选的详细信息。在按钮保存点击我需要验证控件,如单选按钮所需的字段验证器 enter image description here

我的问题是Javascript来验证客户端的单选按钮选择。

我试过Javascript

<script language="javascript">
    function Validate() {
        var RB1 = document.getElementById("rdbPlans");
        var radio = RB1.getElementsByTagName("input");
        var isChecked = false;
        for (var i = 0; i < radio.length; i++) {
            if (radio[i].checked) {
                isChecked = true;
                break;
            }
        }
        if (!isChecked) {
            alert("Please select an Plan");
        }
        return isChecked;
    }
</script>

//但它不起作用。

GridView列是

<Columns>
<asp:TemplateField HeaderText="Select">
    <ItemTemplate>
        <asp:CheckBox ID="CheckBox1" runat="server" OnCheckedChanged="CheckBox1_OnCheckedChanged"
            AutoPostBack="true" />
    </ItemTemplate>                                                   

</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="name">
    <HeaderStyle Width="30%" />

</asp:BoundField>
<asp:TemplateField HeaderText="Plans">
    <ItemTemplate>
        <asp:RadioButtonList ID="rdbPlans" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="rdbPlan_OnSelectedIndexChanged" Enabled="false">
        </asp:RadioButtonList>
    </ItemTemplate>

</asp:TemplateField>
<asp:TemplateField HeaderText="Amount" FooterStyle-HorizontalAlign="Center">
    <ItemTemplate>
        <asp:TextBox ID="txtAmount" Width="80px" runat="server" Text="0.00" Style="text-align: right"
            OnTextChanged="txtAmount_OnTextChanged" AutoPostBack="true" Enabled="false"
            CssClass="txtBox" />
    </ItemTemplate>
    <FooterTemplate>
        <asp:TextBox ID="txtTotalAmount" Width="80px" runat="server" CssClass="txtBox" Text="0.00"
            Style="text-align: right;" />
    </FooterTemplate>
    <HeaderStyle Width="20%" HorizontalAlign="Center" />                                                    
</asp:TemplateField>

2 个答案:

答案 0 :(得分:2)

请按照以下步骤操作,它可能会对您有所帮助:

  1. 定义的公共变量RadioButtonListClientIDs,用于以逗号存储动态生成的RadioButtonList名称

  2. 在GridView的RowCreated事件上找到RadioButtonList

  3. 获取RadioButtonList的客户端ID并使用逗号存储到RadioButtonListClientIDs

  4. 定义javascript varialble如下

    var rblistid ='&lt;%= RadioButtonListClientIDs%&gt;';

  5. 使用split函数可以从rblistid转换数组。

    var rbid = rblistid.split(“,”),

    for (i = 0, l = rbid.length; i < l; i += 2) {
    
    $( "input[name=" + rbid[i] + "]:radio" ).each (function( index ) {
                alert(this.checked);
    });
    

    }

  6. 从上面的逻辑中,您将找到所有复选框及其状态,您可以继续进行验证

答案 1 :(得分:0)

试试此代码

<script type="text/javascript">  
     function Validate() {  
         var gv = document.getElementById("<%=GridView1.ClientID%>");  // your gridview name here
         var rbs = gv.getElementsByTagName("input");  
         var flag = 0;  
         for (var i = 0; i < rbs.length; i++) { 

             if (rbs[i].type == "radio") {  
                 if (rbs[i].checked) {  
                     flag = 1;  
                     break;  
                 }  
             }  
         }  
         if (flag == 0) {  
             alert("Select One");  
             return false;  
         }  
         else { 
             var x= confirm("Are you sure you want to delete?");
             if(x==true)
                return true;
                else
                {
                    if(document.getElementById("<%=Label1.ClientID%>") != null)
                    document.getElementById("<%=Label1.ClientID%>").innerText = "";
                    return false;
                }
         }     
     }  

查看我的文章以供参考 http://www.c-sharpcorner.com/uploadfile/Dorababu742/using-radio-button-in-gridview/