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

Question

在我的网页中，我有一个 GridView，每个 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>

Answer 1

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

1. 定义公共(public)变量 RadioButtonListClientIDs 用于存储动态生成的带逗号的 RadioButtonList 名称

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

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

4. 如下定义javascript变量

   var rblistid ='<%=RadioButtonListClientIDs%>';

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

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