Reputation: 162

How to select all checkboxes from table using javascript

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?

Upvotes: 0

Answers (2)

Anand Pandey

Reputation: 2025

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

Upvotes: 0

Abhimanyu CHOUGULE

Reputation: 21

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>

Upvotes: 1

How to select all checkboxes from table using javascript

Answers (2)

Related Questions