GridView的RadioButtonList使用javascript验证

Question

我有一个网格视图内部的网格视图使用一个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" /> 

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

Answer 1

您可以将javascript客户端事件绑定到按钮，并迭代每个radiobuttonlist以验证是否至少在单选按钮被选中。

$('<%= 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

阿迪尔说了这个例子需要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>