使用javascript验证Gridview RadioButtonList

本文关键字：RadioButtonList Gridview 验证 javascript 使用 | 更新日期: 2023-09-27 18:18:21

我有一个网格视图，在网格视图内部使用一个RadioButtonList，在网格视图外部使用一个asp.net Button，当用户单击该按钮时，所有的单选按钮列表都应该被选中，然后只有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" />

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

使用javascript验证Gridview RadioButtonList

您可以将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")
  });
});

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>
相关文章：