给DataGrid中前添加CheckBox,全选和全不选问题,经典解决方案.

时间:2022-05-03 09:20:04

在head里添加js

  <script language="JavaScript">  
   function Selectallup(opt)  
   {    
    var c = document.Form1;  
                for(var i=0;i<c.elements.length;i++)  
                {    
     var box=c.elements.elements[i]                        
     box.checked=opt.checked;  
                }  
   }  
  </script>

DataGrid中html代码.

<asp:datagrid id="DataGrid1" runat="server" Width="100%" BorderWidth="1px" AutoGenerateColumns="False">
                <AlternatingItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></AlternatingItemStyle>
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle"></ItemStyle>
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"></HeaderStyle>
                <Columns>
                 <asp:TemplateColumn>
                  <ItemStyle Width="3%"></ItemStyle>
                  <HeaderTemplate>
                   <asp:CheckBox id="Checkbox2" runat="server" onclick="Selectallup(this)"></asp:CheckBox>
                  </HeaderTemplate>
                  <ItemTemplate>
                   <asp:CheckBox id="CheckBox1" runat="server"></asp:CheckBox>
                  </ItemTemplate>
                 </asp:TemplateColumn>
                 <asp:BoundColumn DataField="ZPRBMMC" ReadOnly="True" HeaderText="部门">
                  <ItemStyle Width="10%"></ItemStyle>
                 </asp:BoundColumn>
                 <asp:BoundColumn DataField="ZYGGH" ReadOnly="True" HeaderText="工号">
                  <ItemStyle Width="10%"></ItemStyle>
                 </asp:BoundColumn>

                </Columns>

</asp:datagrid>

 ===========================================================================

<script type="text/javascript">
    function checkAll() {
        var code_Values = document.getElementsByTagName("input");
        for (i = 0; i < code_Values.length; i++) {
            if (code_Values[i].type == "checkbox") {
                code_Values[i].checked = true;
            }
        }
    }
    function uncheckAll() {
        var code_Values = document.getElementsByTagName("input");
        for (i = 0; i < code_Values.length; i++) {
            if (code_Values[i].type == "checkbox") {
                code_Values[i].checked = false;
            }
        }
    }
  </script>

<table align="center" style="width:750px;" cellpadding="0" cellspacing="1" class="list">
   <thead>
        <tr  class="content_tr_header">
            <td width="15%">&nbsp;<a href="javascript:;" onclick="checkAll();">全选</a>/<a href="javascript:;" onclick="uncheckAll();">全不选</a></td>
            <td width="25%">&nbsp;预算科目编号</td>
            <td width="50%">&nbsp;预算科目名称</td>
            <td width="10%">&nbsp;是否显示</td>
        </tr>
    </thead>
    <tbody>
        <asp:Repeater ID="rptCostSubjectList" runat="server">
            <ItemTemplate>
            <tr class="list_body">
                <td>&nbsp;<asp:CheckBox ID="cb1" runat="server" Checked='<%# (Int32)Eval("State") == 1 ? true : false %>' />
                <asp:TextBox ID="txtID" runat="server" Text='<%# Eval("ID")%>' style="display:none;"></asp:TextBox></td>
                <td>&nbsp;<%#Eval("SAKNR")%></td>
                <td>&nbsp;<%# Eval("TXT50")%></td>
                <td>&nbsp;<%# (Int32)Eval("State") == 1 ? "是" : "否" %></td>
            </tr>
            </ItemTemplate>
        </asp:Repeater>
       
    </tbody>
    <tfoot>
        <tr>
            <td align="right" colspan="4">
                <uc1:UC_GetRecordsByPage ID="ucPager" runat="server" />
            </td>
        </tr>
    </tfoot>
</table>