網格視圖中的複選框標題存在問題

Question

我的網絡表單上有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; 

將循環遍歷表單的所有元素，這包括radiobuttions，它會「檢查」它們。

你需要像

frm.checkRec[i].checked=true; 

在網格中「檢查」所有的複選框（只有這些）

Answer 2

你發展的需要，下面樣的腳本爲服務宗旨，爲它正在獲取表格中的所有元素

<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標題中複選框的標識。 「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>