CODEWITHSUNDEEP
javascriptc#asp.netlistview
WAQ
WAQ

Reputation: 2626

Select All checkBox's in List View on client side using javascript

I have a listview in which I have a checkbox in the header. I want to select all checkboxes in the rows, if the header checkbox is checked/unchecked. How can I achieve this on the client side? Here is the ListView design code.

<asp:ListView ID="lvTypes" runat="server" GroupPlaceholderID="groupPlaceHolder1" ItemPlaceholderID="itemPlaceHolder1">
    <LayoutTemplate>
        <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper" role="grid">
            <table id="DataTables_Table_0" class="table table-striped table-bordered bootstrap-datatable datatable responsive dataTable" aria-describedby="DataTables_Table_0_info">
                <thead class="box-header well" style="font-size: 12px !important;">
                    <tr role="row">
                        <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 50px;" aria-sort="ascending" aria-label="SNo: activate to sort column descending">S.No 
                        </th>
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 188px;" aria-label="Name: activate to sort column ascending">Name  
                        </th>                                                    
<th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 200px;" aria-label="Action: activate to sort column ascending">
                            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true"  OnCheckedChanged="chkSelectAll_CheckedChanged" Text="Action"/>
                        </th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" style="text-align: center; width: 188px;" aria-label="Employee ID: activate to sort column ascending">Desription 
                        </th>
                    </tr>
                </thead>
                <tbody role="alert" aria-live="polite" aria-relevant="all">
                    <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>

                </tbody>
            </table>
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <tr>
            <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
        </tr>
    </GroupTemplate>
    <ItemTemplate>
        <td style="text-align: center;">
            <%# Container.DataItemIndex + 1 %>
        </td>
        <td style="text-align: center;">
            <asp:CheckBox ID="cbDelProjectType" Checked="false" runat="server" />
            <a class="iframe2 cboxElement" href='<%# ResolveUrl("./Admin_EditPage.aspx?editTemplateId="+ Eval("id").ToString() ) %>'>
                <img src="./images/file_edit.png" alt="Edit Type" width="20px" height="20px" />
            </a>
        </td>
        <td style="text-align: center;">
            <%# Eval("title") %>
        </td>
        <td style="text-align: center;">
            <%# Eval("description") %>
        </td>

    </ItemTemplate>
</asp:ListView>

Upvotes: 0

Views: 2237

Answers (2)

Suprabhat Biswal
Suprabhat Biswal

Reputation: 3216

First, change your header Checkbox to this one. We don't need it to postback. 

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="false"  onchange="CheckAll(this);" Text="Action"/>

After doing this add following javascript in your tag.

function CheckAll(checkid) {
            var updateButtons = $('#DataTables_Table_0 input[type=checkbox]');
            if ($(checkid).children().is(':checked')) {
                updateButtons.each(function () {
                    if ($(this).attr("id") != $(checkid).children().attr("id")) {
                        $(this).prop("checked", true);
                    }
                });
            }
            else {
                updateButtons.each(function () {
                    if ($(this).attr("id") != $(checkid).children().attr("id")) {
                        $(this).prop("checked", false);
                    }
                });
            }
        }

Upvotes: 1

Mouser
Mouser

Reputation: 13304

window.addEventListener("onload", function(){
   document.getElementById("DataTables_Table_0_wrapper").querySelector("thead").querySelector("input[type='checkbox']").addEventListener("click", checkTheBoxes, false);
}, false);

  function checkTheBoxes()
  {
     var checkIt;

     if (this.checked)
     {
        checkIt = true;
     }
     else
     {
        checkIt = false;
     }

     var checkboxes = document.getElementById("DataTables_Table_0_wrapper").querySelector("tbody").querySelectorAll("input[type='checkbox']");
     Array.prototype.map.call(checkboxes, function(element){
         element.setAttribute("checked", checkIt);
     });
  }

This should do it:

It starts with adding a click event to your checkbox in the header. When clicked it checks if the box is ticked or not using this.checked. It then select your checkboxes within the listview table's body. The table itself wrapped in a div with an id. Select all elements in the tbody using querySelectorAll, that are a checkbox. Then iterate over them using Array.prototype.map, checking or unchecking them one by one.

Upvotes: 0

Related Questions