Cấp bậc tác giả:

DOTNET

Select/Deselect tất cả các Checkbox trong gridview sử dụng JavaScript

Được viết bởi QuangIT ngày 29/09/2013 lúc 04:26 PM
Bài viết này sẽ hướng dẫn làm thế nào để lựa chọn và bỏ chọn tất cả các Checkbox từ tất cả các cell của điều khiển GridView sử dụng JavaScript đơn giản.
  • 0
  • 9920

Select/Deselect tất cả các Checkbox trong gridview sử dụng JavaScript

Giới thiệu
Bài viết này sẽ hướng dẫn làm thế nào để lựa chọn và bỏ chọn tất cả các Checkbox từ tất cả các cell của điều khiển GridView sử dụng JavaScript đơn giản.


select_all___1.jpg

Javascript

<script type="text/javascript" language="javascript">       
        function SelectAll(chkbox) {
            var chk = document.getElementById(chkbox);
            var grid = document.getElementById("<%= gvParentGrid.ClientID %>");
            var cell;
            if (chk.checked == true) {                
                if (grid.rows.length > 0) {
                    for (i = 1; i < grid.rows.length; i++) {
                        for (var k = 0; k < grid.rows[i].cells.length; k++) 
                        {
                            cell = grid.rows[i].cells[k];
                            for (j = 0; j < cell.childNodes.length; j++) {
                                if (cell.childNodes[j].type == "checkbox") {                                    
                                    cell.childNodes[j].checked = true;
                                }
                            }
                        }
                    }
                }
            }
            else {
                if (grid.rows.length > 0) {
                    for (i = 1; i < grid.rows.length; i++) {
                        for (var k = 0; k < grid.rows[i].cells.length; k++) 
                        {
                            cell = grid.rows[i].cells[k];
                            for (j = 0; j < cell.childNodes.length; j++) {
                                if (cell.childNodes[j].type == "checkbox") {
                                    cell.childNodes[j].checked = false;
                                }
                            }
                        }
                    }
                }
            }           
        }
        </script> 

Code Page

<div>
    <table style="width: 100%;">            
        <tr>                
            <td>                   
                <input type="checkbox" id="chkSelectAll" 
                runat="server" onclick="SelectAll('chkSelectAll')" />
                <asp:Label ID="lblSelectAll" runat="server" 
                Text="Select All"></asp:Label>
            </td>
        </tr>
    </table>
</div>
<div>
<asp:GridView ID="gvMyGrid" runat="server" 
DataKeyNames="sysprivgrpid" Width="850px" 
        AutoGenerateColumns="False" GridLines="None" 
        OnRowDataBound="gvMyGrid_RowDataBound" BorderStyle="Solid" 
        BorderWidth="1px"  BorderColor="#DF5015">
        <HeaderStyle BackColor="#df5015" Font-Bold="true" 
        ForeColor="White" />
        <RowStyle BackColor="#E1E1E1" />
        <AlternatingRowStyle BackColor="White" />
        <HeaderStyle BackColor="#df5015" Font-Bold="true" 
        ForeColor="White" />
            <Columns>                              
                <asp:TemplateField HeaderText="Special" >
                    <ItemTemplate>                                               
                        <input type="checkbox" id="chkpSpecial" 
                        name="pSpecial" runat="server" 
                        value='<%# Eval("pSpecial") %>' Visible="false" 
                        clientidmode="Static" /> 
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="View" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpView" 
                        name="pView" runat="server" 
                        value='<%# Eval("pView") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Update" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpUpdate" 
                        name="pUpdate" runat="server" 
                        value='<%# Eval("pUpdate") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Delete" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpDelete" 
                        name="pDelete" runat="server" 
                        value='<%# Eval("pDelete") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Add" >
                    <ItemTemplate>
                        <input type="checkbox" id="chkpAdd" 
                        name="pAdd" runat="server" 
                        value='<%# Eval("pAdd") %>' Visible="false" 
                        clientidmode="Static" />
                    </ItemTemplate>
                    <HeaderStyle HorizontalAlign="Left" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
</div>

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML