how to select all value from table using javascript

In this from jquery ajax table row are created.

In html table headers defined with select all checkbox. there are two hidden fields. when in click on select all checkbox then all rows gets selected from JavaScript and one of hidden filed should store 'Select All' text and when select all checkbox is unchecked then it should store 'Unselect All' text.

$(document).ready(function() {
  $("#cbSelectAll").click(function() {
    if ($(".checkBoxClass").prop('checked', $(this).prop('checked'))) {
      var hidSelectAll = document.getElementById("hfSelectAll");
      var str = 'Select All';
      hidSelectAll.value = str;
      console.log(hidSelectAll);
    } else {
      var str1 = 'UnSelect All';
      hidSelectAll.value = str;
      console.log(hidSelectAll);
    }
  });
  $(".checkBoxClass").change(function() {
    if (!$(this).prop("checked")) {
      $("#cbSelectAll").prop("checked", false);
    }
  });
});

$.each(data.Customers, function(i, item) {

  trHTML += ' <tbody class="table-hover"><tr>' +
    '<td class="text-left"><div class="checkbox" style="padding-left:50px;"><label><input type="checkbox" id=" ' + item.CustomerID + '" class="checkBoxClass"/></label></div></td>' +
    '<td class="text-left" id="tblFirstName"> ' + item.FirstName + '</td>' +
    '<td class="text-left" id="tblLastName"> ' + item.LastName + '</td>' +
    '<td class="text-left" id="tblEmailID"> ' + item.EmailID + '</td>' +
    '<td class="text-left" id="tblCustomerType"> ' + item.CustomerType + '</td>' +
    '<td class="text-left" id="tblCustomerDesignation" style="padding-left:40px;padding-right:30px;"> ' + item.CustomerDesignation + '</td></tr></tbody>'
});

<script src="http://ift.tt/1oMJErh"></script>
<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" />