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>