Проверка всех флажков в ASP.NET Gridview, несколько таблиц на той же странице

Question

Хорошо, поэтому есть много документации, которую я подавал и пытался много раз в течение дня и, похоже, не мог прибить эту проблему. У меня есть несколько Gridviews на одной странице (внутри сменных панелей), из которых два имеют столбец (7-й столбец, от 0), содержащий флажки. Я хочу, чтобы пользователь мог выбрать/отменить выбор всех флажков, используя поле флажка в строке заголовка. Я предпочитаю делать это с помощью Javascript, но, похоже, не могу туда добраться. This - это то, как я предпочитаю, так как кажется, что он будет работать с несколькими таблицами на странице (исправьте меня, если я ошибаюсь). Используя Firebug, ошибок не было, он просто не работает, и я не могу понять, почему.

Вот мой код ASP.NET:

 <asp:GridView ID="gvSerialNumberDetails" CellPadding="5" runat="server" CssClass="wind" AutoGenerateColumns="false"> 
      <HeaderStyle CssClass="windHeader" /> 
      <Columns> 
       <asp:BoundField DataField="Description" HeaderText="Description" /> 
       <asp:BoundField DataField="Serial Number" HeaderText="Serial Number" /> 
       <asp:BoundField DataField="Facility" HeaderText="Facility" /> 
       <asp:BoundField DataField="Department" HeaderText="Department" /> 
       <asp:BoundField DataField="EmpID" HeaderText="EmpID" /> 
       <asp:BoundField DataField="Configuration" HeaderText="Config" /> 
       <asp:BoundField DataField="Error" HeaderText="Errors" /> 
       <asp:TemplateField> 
        <HeaderTemplate> 
         <asp:CheckBox ID="chkHeader" ToolTip="Select All" runat="server" 
          onclick="changeAllCheckBoxes(this)" /> 
        </HeaderTemplate> 
        <ItemTemplate> 
         <asp:CheckBox ID="chkItem" runat="server" ToolTip="Select this item" /> 
        </ItemTemplate> 
       </asp:TemplateField> 
      </Columns> 
     </asp:GridView> 

А вот мой Javascript:

<script type="text/javascript" language="javascript"> 
    function changeAllCheckBoxes(sender) { 
    var gridViewRows = GetParentElementByTagName(sender, "table").rows; 
     for (var i = 1; i < gridViewRows.length; ++i) { 
      gridViewRows[i].cells[7].childNodes[0].checked = sender.checked; 
     } 
    } 

    function GetParentElementByTagName(element, tagName) { 
     var element = element; 
     while (element.tagName != tagName) 
      element = element.parentNode; 
     return element; 
    } 
</script> 

UPDATE

Хорошо, так что я получаю сообщение об ошибке в настоящее время. "TypeError: element is null [Break On This Error] </tr><tr>" Как я могу это исправить? Похоже, что он должен подняться по DOM и найти элемент таблицы, но этого не делает.

Answer 1

Пожалуйста, попробуйте выполнить javascript функцию insdead yours. Я проверяю эти функции, и он отлично работает в моем коде. Дайте мне знать, если вы найдете какие-либо трудности.

function changeAllCheckBoxes(objparentcheckbox) 
    {    
     var HeaderCheckboxControl = objparentcheckbox 
     var table = getParentByTagName(HeaderCheckboxControl, 'table'); 

     //get all the control of the type INPUT in the base control. 
     var Inputs = table.getElementsByTagName("input"); 

     for(var n = 0; n < Inputs.length; ++n) 
     if(Inputs[n].type == 'checkbox') 
     { 
      Inputs[n].checked = HeaderCheckboxControl.checked;   
     }   
     return false; 
    } 
function getParentByTagName(obj, tag) 
{ 
    var obj_parent = obj.parentNode; 
    if (!obj_parent) return false; 
    if (obj_parent.tagName.toLowerCase() == tag) return obj_parent; 
    else return getParentByTagName(obj_parent, tag); 
} 

Jquery Чередование для описанным выше способом, как показано ниже:

function changeAllCheckBoxes(objparentcheckbox) 
{ 
    if(objparentcheckbox.checked) 
    $(objparentcheckbox).closest('table').find('input[type=checkbox]').attr('checked', 'checked');   
    else  
    $(objparentcheckbox).closest('table').find('input[type=checkbox]').removeAttr('checked', 'checked');    
} 

здесь я добавить jsfiddle ссылку на демо: Demo link