使用 javascript 的 Gridview RadioButtonList 验证

Question

当用户单击该按钮时，应选择所有单选按钮列表，然后只有 Button应该提交事件。

下面是我的网格视图RadioButtonList。

<asp:TemplateField HeaderText="Add Score">
<ItemTemplate>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="cssrbt">
<asp:ListItem Text="Correct" Value="1"></asp:ListItem>
<asp:ListItem Text="Wrong" Value="2"></asp:ListItem>
</asp:RadioButtonList>

</ItemTemplate>
</asp:TemplateField>

下面是我使用gridview外侧的按钮。

<asp:Button ID="btn_Submit" runat="server" class="btn btn-md btn-danger" Text="Submit" OnClick="btn_Submit_Click"  ValidationGroup="viva" />

我的问题是没有选择插入所有网格视图数据并且我想验证。

Answer 1

您可以将 javascript 客户端事件绑定到按钮并迭代每个单选按钮列表以验证是否选择了至少一个单选按钮。

$('<%= btn_Submit.ClientID %>').click(function(){
  $('.cssrbt').each(function(){
    if($(this).find(':radio:selected').length == 0)
         console.log("One of radio button list option must be selected")
  });
});

Answer 2

adil 给出的例子需要 JQuery 库来实现，如果你不想使用任何库，只有 javascript 你可以像这样验证

 <form runat="server" id="form1" action="Test.aspx.cs">

    <asp:TemplateField HeaderText="Add Score">
<ItemTemplate>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="cssrbt">
<asp:ListItem Text="Correct" Value="1"></asp:ListItem>
<asp:ListItem Text="Wrong" Value="2"></asp:ListItem>
</asp:RadioButtonList>


</ItemTemplate>
</asp:TemplateField>


          <asp:Button ID="btn_Submit" runat="server" class="btn btn-md btn-danger" Text="Submit" OnClientClick="return Validate('RadioButtonList1')" OnClick="btn_Submit_OnClick"  />

    </form>


    <script language="javascript" type="text/javascript">
                function Validate(id) {
                    var radiobutton = document.getElementsByName(id);
                    var flag;
                    for (var j = 0; j < radiobutton.length; j++) {
                        if (radiobutton[j].checked !== true) {
                            flag = true;
                        } else {
                            break;
                        }


                    }

                    if (flag) {
                        alert("Please select one option");
                        return false;

                    } 
                }
            </script>