Gridview RadioButtonList javacriptを使用した検証

Question

グリッドビュー内に1つのRadioButtonListと1つのasp.net Buttonを使用してグリッドビューを使用する1つのグリッドビューがあります。ユーザーがそのボタンをクリックするとすべてのラジオボタンリストを選択してください。イベント提出する必要があります。

以下は私のグリッドビュー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> 

以下は、グリッドビューの外側を使用するマイボタンです。

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

私の問題は、すべてのグリッドビューデータを選択せず​​に検証したいという問題です。

Answer 1

ボタンにjavascriptクライアントイベントをバインドし、各ラジオボタンリストを反復して、atleast onラジオボタンが選択されているかどうかを検証できます。

$('<%= 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ライブラリを与え、あなたはこの

<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>