0

了解しました。1日を通して何度も提出して試みたドキュメントがたくさんあり、この問題を突き止めることはできないようです。1つのページ（折りたたみ可能なパネル内）に複数のグリッドビューがあり、そのうちの2つにはチェックボックスを含む列（0から7番目の列）があります。ヘッダー行のチェックボックスフィールドを使用して、ユーザーがすべてのチェックボックスを選択/選択解除できるようにしたい。私はJavascriptを使用してこれを達成することを好みますが、そこに到達できないようです。これは、ページ上の複数のテーブルで機能するように見えるので、私が好む方法です（間違っている場合は修正してください）。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>

アップデート

了解しました。エラーが発生しました。"TypeError: element is null [Break On This Error] </tr><tr>"これを修正するにはどうすればよいですか？DOMを上ってテーブル要素を見つける必要があるようですが、そうではありません。

4

1 に答える 1

1

以下のjavascript関数を試してみてください。この関数をチェックすると、コードで完全に機能します。何か問題があれば教えてください。

    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);
}

上記のメソッドのJqueryAlternationは次のとおりです。

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リンクを追加します：デモリンク

于 2012-12-04T06:23:47.137 に答える