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

【问题标题】：Javascript/JQuery to validate the Radio button list in the Gridview at client sideJavascript/JQuery 验证客户端 Gridview 中的单选按钮列表
【发布时间】：2013-12-25 10:28:19
【问题描述】：

在我的网页中，我有一个 GridView，每个网格视图行都包含一个复选框和一组单选按钮在一列中，如代码所示。如果选中复选框，则单选按钮将启用为 true 以进行选择，如屏幕截图所示。在底部，我们有一个提交按钮来保存选定的详细信息。在按钮保存单击时，我需要验证控件，例如单选按钮的必填字段验证器。

我的问题是 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>

【问题讨论】：

向我们展示您在 javascript/jquery 中尝试了什么？使用您尝试过的 gridview 和脚本的 html 输出创建一个 jsfilddle 或 jsbin。
编辑您的问题并使用代码更新它，然后删除您的评论。还创建一个fiddle.net 与您的gridview 的html 输出。
不是这个代码。来自浏览器的 gridview 的 HTML 输出。在 chrome 或 IE 中使用开发者工具 (F12) 并使用该代码进行更新。

标签： javascript jquery asp.net gridview

【解决方案1】：

请按照以下步骤操作，可能对您有所帮助：

定义的公共变量 RadioButtonListClientIDs 用于存储动态生成的 RadioButtonList 名称（带逗号）
在 GridView 的 RowCreated 事件上找到 RadioButtonList
获取 RadioButtonList 的客户端 ID 并用逗号存储到 RadioButtonListClientIDs 中
定义javascript变量如下

var rblistid ='';

使用 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);
});

}

从上面的逻辑你会发现所有的复选框和它的状态，你可以继续你的验证

【讨论】：

【解决方案2】：

试试这个代码

<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/

【讨论】：