How to select all checkboxes from table using javascript

Question

Script:-

 <script type="text/javascript">
        $(document).ready(function () {
            $("#cbSelectAll").click(function () {
                if (this.checked) {
                    $(':checkbox').each(function () {
                        this.checked = true;
                        var selectall = document.getElementsByClassName(".checkBoxClass");
                        var cid = $(this).attr('id');
                        console.log('cid' + cid);
                        var hidSelectAll = document.getElementById("hfSelectAll");
                        var hidCustomer = document.getElementById("hfCustomerID");
                        hidCustomer = '';
                        var str = 'Select All';
                        hidSelectAll.value = str;
                        console.log(hidSelectAll);
                    });
                    $("#GridRows .checkBoxClass").change(function () {
                        if (!$(this).prop("checked")) {
                            $("#cbSelectAll").prop("checked", false);
                            var cid = $(this).attr('id');
                            console.log('cid' + cid);
                            var hidSelectAll = document.getElementById("hfSelectAll");
                            var str = 'Select All + unselected values';
                            hidSelectAll.value = str;
                            console.log(hidSelectAll);
                        }
                    });   
                }
                else {
                    $(':checkbox').each(function () {
                        this.checked = false;
                        var hidSelectAll = document.getElementById("hfSelectAll");
                        var str = 'UnSelect All';
                        hidSelectAll.value = str;
                        console.log(hidSelectAll);
                    });
                    $(".checkBoxClass").change(function () {
                        if (!$(this).prop("checked")) {
                            $("#cbSelectAll").prop("checked", false);
                            var hidSelectAll = document.getElementById("hfSelectAll");
                            var str = 'unSelect All + selected values';
                            hidSelectAll.value = str;
                            console.log(hidSelectAll);
                        }
                    });
                }
            });
        });
    </script>

HTML:-

<body>
        <h4>Number Of Records - <span>@ViewBag.ItemCount</span> </h4>
        <div class="table-responsive" style="padding-left:20%;">
            <table class="table-fill" style="float:left;">
                <thead>
                    <tr>
                        <th class="text-left">                            
                             Select All
                            <div class="checkbox">
                                <input style="margin-left:15px;" type="checkbox" id="cbSelectAll" />
                            </div>
                        </th>
                        <th class="text-left" style="padding-left:27px;">
                            First Name
                        </th>
                        <th class="text-left" style="padding-left:32px;">
                            Last Name
                        </th>
                        <th class="text-left" style="padding-left:40px;padding-right: 60px;">
                            Email-ID
                        </th>
                        <th class="text-left" style="padding-left:30px;padding-right: 40px;">
                            Customer Type
                        </th>
                        <th class="text-left" style="padding-left:15px;">
                            Customer Designation
                        </th>
                    </tr>
                </thead>
            </table>
            <div id="GridRows" style="width:65%;">
            </div>
        </div>

        <div id="pager"></div>
        <input type="hidden" id="currentPage">
        <input type="hidden" id="hfCustomerID"/>
        <input type="hidden" id="hfSelectAll" />
    </body>

this is html. Rows generated dynamically from jquery ajax call to avoid loss of values stored in hidden field on page load.

In this when clicked on select all checked box all values of table from same page selected.

how to store all values of table from multiple pagination when clicked on Select All checkbox?

what are option for storing all values of table?

Can you please add the HTML code of the page

ankit verma
– ankit verma

2017-05-11 09:24:14 +00:00
Commented May 11, 2017 at 9:24 — ankit verma
– ankit verma, Commented May 11, 2017 at 9:24

Abhimanyu CHOUGULE · Accepted Answer · 2017-05-11 09:31:48Z

Actually your checkAll(..) is hanging without any attachment.

1) Add onchange event handler

2) Modified the code to handle check/uncheck

function addRow(tableID) {

     var table = document.getElementById(tableID);

     var rowCount = table.rows.length;
     var row = table.insertRow(rowCount);

     var cell1 = row.insertCell(0);
     var element1 = document.createElement("input");
     element1.type = "checkbox";
     element1.name = "chkbox[]";
     cell1.appendChild(element1);

     var cell2 = row.insertCell(1);
     cell2.innerHTML = rowCount;

     var cell3 = row.insertCell(2);
     cell3.innerHTML = rowCount;

     var cell4 = row.insertCell(3);
     cell4.innerHTML = rowCount;

     var cell5 = row.insertCell(4);
     cell5.innerHTML = rowCount;

     var cell6 = row.insertCell(5);
     cell6.innerHTML = rowCount;
 }

 function deleteRow(tableID) {
     try {
         var table = document.getElementById(tableID);
         var rowCount = table.rows.length;

         for (var i = 1; i < rowCount; i++) {
             var row = table.rows[i];
             var chkbox = row.cells[0].childNodes[0];
             if (null != chkbox && true == chkbox.checked) {
                 table.deleteRow(i);
                 rowCount--;
                 i--;
             }
         }
     } catch (e) {
         alert(e);
     }
 }

 function checkAll(ele) {
     var checkboxes = document.getElementsByTagName('input');
     if (ele.checked) {
         for (var i = 0; i < checkboxes.length; i++) {
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = true;
             }
         }
     } else {
         for (var i = 0; i < checkboxes.length; i++) {
             console.log(i)
             if (checkboxes[i].type == 'checkbox') {
                 checkboxes[i].checked = false;
             }
         }
     }
 }

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" border="1">
    <tr>
        <th>
            <INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" />
        </th>
        <th>Make</th>
        <th>Model</th>
        <th>Description</th>
        <th>Start Year</th>
        <th>End Year</th>
    </tr>
</TABLE>

Anand Pandey · Accepted Answer · 2017-05-11 09:37:20Z

You can if you are using datatable.

$(document).ready(function () { 
var oTable = $('#example').dataTable({
    stateSave: true
});

var allPages = oTable.fnGetNodes();

$('body').on('click', '#selectAll', function () {
    if ($(this).hasClass('allChecked')) {
        $('input[type="checkbox"]', allPages).prop('checked', false);
    } else {
        $('input[type="checkbox"]', allPages).prop('checked', true);
    }
    $(this).toggleClass('allChecked');
})
});

There is one more option i.e. you have to add same class name on all checkboxes and add this code.(If you not use datatable).

var select_all = document.getElementById("select_all");
var checkboxes = document.getElementsByClassName("checkbox"); 
select_all.addEventListener("change", function(e){
    for (i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = select_all.checked;
 }
});

for(var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('change', function(e){ //".checkbox" change
//uncheck "select all", if one of the listed checkbox item isunchecked
    if(this.checked == false){
        select_all.checked = false;
    }
if(document.querySelectorAll('.checkbox:checked').length ==checkboxes.length){
        select_all.checked = true;
    }
});
}

Collectives™ on Stack Overflow

How to select all checkboxes from table using javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related