チェックボックスの問題グ​​リッド表示のヘッダー

Question

Webフォームに2つのラジオボタンがあります。つまり、Radio1とRadio2です。これらの選択に基づいて、私はGridViewとCheck box選択といくつかのデータを表示します。このGridViewにはヘッダーチェックボックスがあり、そこからgridviewで利用可能なすべてのチェックボックスを選択できます。しかし、これを選択するとラジオボタンの選択も変わります。私がRadio1を最初に選択していて、ヘッダとして利用可能なチェックボックスをクリックすると、ラジオボタンの選択がRadio2に切り替わることを意味します。なぜこれが起こっているのでしょう。

スクリプト私は

<script type="text/javascript"> 
function check_uncheck (Val) 
{ 
var ValChecked = Val.checked; 
var ValId =Val.id; 
var frm = document.forms[0]; 
// Loop through all elements 
for (i=0; i<frm.length; i++) 
{ 
// Look for Header Template's Checkbox 
if (this!=null) 
{ if (ValId.indexOf ('CheckAll') != -1) 
{ 
// Check if main checkbox is checked, then select or deselect datagrid checkboxes 
if(ValChecked) frm.elements[i].checked = true; 
else frm.elements[i].checked = false; 
} 
else if (ValId.indexOf ('checkRec') != -1) 
{ 
// Check if any of the checkboxes are not checked, and then uncheck top select all checkbox 
if(frm.elements[i].checked == false) frm.elements[1].checked = false; 
} 
} 
} 
} 
</script> 

私のグリッドビューの設計

<asp:GridView ID="grdPayroll" runat="server" HeaderStyle-BackColor="green" AutoGenerateColumns="False" 
       CssClass="grid_cen" Font-Names="Arial" Font-Size="11pt" AlternatingRowStyle-BackColor="#C2D69B" 
       CellPadding="4" CellSpacing="10" ForeColor="Black" GridLines="Vertical" PageSize="5" 
       Visible="False" BackColor="Black" BorderColor="#d3d4d3" BorderStyle="None" BorderWidth="1px"> 
       <Columns> 
        <asp:TemplateField> 
         <ItemTemplate> 
          <asp:CheckBox ID="checkRec" runat="server" onclick="return check_uncheck (this);" /> 
         </ItemTemplate> 
         <HeaderTemplate> 
          <asp:CheckBox ID="CheckAll" runat="server" onclick="return check_uncheck (this);" /> 


         </HeaderTemplate> 
        </asp:TemplateField> 
        <%--<asp:TemplateField> 
        <ItemTemplate> 
         <asp:RadioButton ID="rdbtnPayroll" runat="server" onclick="RadioCheck(this);" /> 
        </ItemTemplate> 
<<<<<<< .mine 
       </asp:TemplateField>--%> 
        <asp:BoundField DataField="EmpID" HeaderText="Employee ID"> 
         <ItemStyle Width="100px" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="empname" HeaderText="Employee Name"> 
         <ItemStyle Width="100px" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="PayPeriodNumber" HeaderText="PayPeriod Number"> 
         <ItemStyle Width="100px" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="PayRollYear" HeaderText="Payroll Year"> 
         <ItemStyle Width="100px" /> 
        </asp:BoundField> 
        <asp:BoundField DataField="PaymentDate" HeaderText="Payment Date"> 
         <ItemStyle Width="100px" /> 
        </asp:BoundField> 
       </Columns> 
       <HeaderStyle BackColor="#d6dee7" Font-Bold="True" ForeColor="black" Font-Size="smaller" /> 
       <AlternatingRowStyle BackColor="White" /> 
       <EmptyDataTemplate> 
        <h1> 
         No Data Found</h1> 
       </EmptyDataTemplate> 
       <RowStyle BackColor="#e7eff7" Font-Size="XX-Small" CssClass="text_center" /> 
       <FooterStyle BackColor="#CCCC99" /> 
       <PagerStyle BackColor="#e7eff7" ForeColor="Black" HorizontalAlign="Right" Font-Size="XX-Small" /> 
       <SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" /> 
      </asp:GridView> 

私のラジオボタン

<asp:RadioButton ID="rdbtnsimulation" Text="Simulation" runat="server" AutoPostBack="True" 
        GroupName="Run" OnCheckedChanged="rdbtnsimulation_CheckedChanged" /> 
       <asp:RadioButton ID="rdbtnlive" Text="live" runat="server" AutoPostBack="True" GroupName="Run" 
        OnCheckedChanged="rdbtnlive_CheckedChanged" /> 

Answer 1

何のjavascriptの専門家のチェックボックスを選択しないために使用されるが、私はあなたのjavascriptだと思います：

frm.elements[i].checked=true; 

はフォームのすべての要素をループします。これにはラジオボタンが含まれており、ラジオボタンが「チェック」されます。

あなたはあなたのように、目的を果たすためのスクリプトの種類の下、開発に必要なグリッド内のすべてのチェックボックスを「チェック」（とのみこれらの）

Answer 2

に

frm.checkRec[i].checked=true; 

のようなものが必要になりますフォームのすべての要素を取得しています

<script type="text/javascript"> 
     function check_uncheck(Val) { 
      var ValChecked = Val.checked; 
      var ValId = Val.id; 
      var frm = document.forms[0]; 
      var headerCheck = true; 
      var header = ''; 
      // Loop through all elements 
      for (i = 0; i < frm.length; i++) { 
       // Look for Header Template's Checkbox 
       if (this != null) { 
        if (ValId.indexOf('CheckAll') >= 0) { 
         // Check if main checkbox is checked, then select or deselect datagrid checkboxes 
         if (frm.elements[i].id.indexOf('checkRec') >= 0) { 
          if (ValChecked) frm.elements[i].checked = true; 
          else frm.elements[i].checked = false; 
         } 
        } 
        else if (ValId.indexOf('checkRec') > 0) { 
         // Check if any of the checkboxes are not checked, and then uncheck top select all checkbox 
         if (frm.elements[i].id.indexOf('CheckAll') >= 0) { 
          header = frm.elements[i]; 
         } 
         if (frm.elements[i].checked == false && frm.elements[i].id.indexOf('checkRec') >= 0) { 
          headerCheck = false; 
         } 
         if (headerCheck) 
          header.checked = true; 
         else 
          header.checked = false; 
        } 
       } 
      } 
     } 
    </script> 

お手伝いがあります。むしろjQueryの使用を提案します。 :-)

Answer 3

チェックボックスの選択と選択解除が問題なく動作する例を示します。 これに続くクライアント側の機能です。

$(document).ready(function() { 
     initiateCheckAllBinding(); 
    }); 



function initiateCheckAllBinding() { 
     var headerCheckBox = $("input[id$='headercheck']"); 
     var rowCheckBox = $("#listview input[id*='chkitem']"); 

     headerCheckBox.click(function(e) { 
      rowCheckBox.attr('checked', headerCheckBox.is(':checked')); 
     }); 
     // To select CheckAll when all Item CheckBox is selected and 
     // to deselect CheckAll when an Item CheckBox is deselected. 
     rowCheckBox.click(function(e) { 
      var rowCheckBoxSelected = $("#listview input[id*='chkitem']:checked"); 
      headerCheckBox.attr("checked", function() { 
       if (rowCheckBox.length == rowCheckBoxSelected.length) 
        return true; 
       else return false; 
      }); 

     }); 

    } 

ここで、「listview」は、gridviewのIDです。 "headercheck"は、GridviewヘッダーのチェックボックスのIDです。 "chkitem"は、ItemtemplateとalternateitemtemplateのチェックボックスのIDです。

Answer 4

<script type="text/javascript"> 
function check_uncheck (Val) 
{ 
var ValChecked = Val.checked; 

var gridview = document.getElementById('<%=grdPayroll.ClientID %>'); 

//Now get the all the Input type elements 
var AllInputsElements = gridview.getElementsByTagName('input'); 
var TotalInputs = AllInputsElements.length; 
//Now we have to find the checkboxes in the rows. 
for(var i=0;i< TotalInputs ; i++) 
{ 
if(AllInputsElements[i].type=='checkbox') 
{ 
AllInputsElements[i].checked=ValChecked; 
} 
} 
} 
</script> 


<asp:TemplateField> 
<ItemTemplate> 
<asp:CheckBox ID="checkRec" runat="server" /> 
</ItemTemplate> 
<HeaderTemplate> 
<asp:CheckBox ID="CheckAll" runat="server" onclick="check_uncheck (this);" /> 
</HeaderTemplate> 
</asp:TemplateField>