title: How to select all checkboxes from table using javascript
body: <blockquote>
    <p>Script:-</p>
  </blockquote>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $(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);
                          }
                      });
                  }
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p>HTML:-</p>
  </blockquote>
  
  <pre><code>&lt;body&gt;
          &lt;h4&gt;Number Of Records - &lt;span&gt;@ViewBag.ItemCount&lt;/span&gt; &lt;/h4&gt;
          &lt;div class="table-responsive" style="padding-left:20%;"&gt;
              &lt;table class="table-fill" style="float:left;"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th class="text-left"&gt;                            
                               Select All
                              &lt;div class="checkbox"&gt;
                                  &lt;input style="margin-left:15px;" type="checkbox" id="cbSelectAll" /&gt;
                              &lt;/div&gt;
                          &lt;/th&gt;
                          &lt;th class="text-left" style="padding-left:27px;"&gt;
                              First Name
                          &lt;/th&gt;
                          &lt;th class="text-left" style="padding-left:32px;"&gt;
                              Last Name
                          &lt;/th&gt;
                          &lt;th class="text-left" style="padding-left:40px;padding-right: 60px;"&gt;
                              Email-ID
                          &lt;/th&gt;
                          &lt;th class="text-left" style="padding-left:30px;padding-right: 40px;"&gt;
                              Customer Type
                          &lt;/th&gt;
                          &lt;th class="text-left" style="padding-left:15px;"&gt;
                              Customer Designation
                          &lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
              &lt;/table&gt;
              &lt;div id="GridRows" style="width:65%;"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="pager"&gt;&lt;/div&gt;
          &lt;input type="hidden" id="currentPage"&gt;
          &lt;input type="hidden" id="hfCustomerID"/&gt;
          &lt;input type="hidden" id="hfSelectAll" /&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>this is html. Rows generated dynamically from jquery ajax call to avoid loss of values stored in hidden field on page load.</p>
  
  <blockquote>
    <p>In this when clicked on select all checked box all values of table
    from same page selected.</p>
    
    <p>how to store all values of table from multiple pagination when clicked
    on Select All checkbox?</p>
    
    <p>what are option for storing all values of table?</p>
  </blockquote>