javascript - Selecting row does not show correct amount of selected rows in IE -

goal:
if select main checkbox (id="bbbbbb") whether have selected 1 or many row, <div id="selectionrows"></div> should show selected row.

problem:
function doesn't work in ie , have tried thinking how solve failed.

thank you!

$(document).ready(function() {    $("#candy input[type=checkbox]").on("change", function() {      if (this.checked) {        $(this).parents('tr').addclass('selected');        $('#dd').removeclass('selected');          updateselectioncounter();      } else {        $('#bbbbbb').prop('checked', false);        $(this).parents('tr').removeclass('selected');        $('#dd').removeclass('selected');          updateselectioncounter();      }    });      $('#bbbbbb').click(function() {      var checked = $("#bbbbbb").is(':checked');      $(".asdf").each(function() {        $(this).prop('checked', checked);        if (checked) {          $(this).parents('tr').addclass('selected');          $('#dd').removeclass('selected');        } else {          $(this).parents('tr').removeclass('selected');          $('#dd').removeclass('selected');        }      });    });    });    $(document).ready(function() {    updateselectioncounter();  });      $("#bbbbbb input:checkbox").on("click", function() {    updateselectioncounter();  });    $(".item input:checkbox").on("change", function() {    updateselectioncounter();  });    function updateselectioncounter() {    var selectedrows = $(".item input[name='nameselected']:checked").length;    var totalrows = $(".item").length;    $("#selectionrows").text(selectedrows + ' of ' + totalrows + ' selected rows');  }

tr.selected {    background-color: #fef0bf;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="candy" >    <tr id="dd">      <th id="rowlength"><input type="checkbox" id="bbbbbb" /></th>      <th width="20">a</th>      <th width="20">b</th>      <th width="20">c</th>      <th width="20"">d</th>      <th width="20">e</th>      <th width="20">f</th>      <th width="20">g</th>      <th width="20">h</th>    </tr>    <tr class = "item">      <td><input type="checkbox" class="asdf" name="nameselected"  /></td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>                                     </tr>    <tr class = "item">      <td><input type="checkbox" class="asdf" name="nameselected" /></td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>                                      </tr>      <tr class = "item">      <td><input type="checkbox" class="asdf" name="nameselected" /></td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>                                      </tr>  </table>  <br/>  <div id="selectionrows"></div>

the problem in ie updateselectioncounter() executed before checkboxes checked, function see 3 checkeds when call function again.

i "solve" in snippet adding timeout in function, show problem, i'm looking reason why ie different chrome , firefox, if found solution upload answer, believe @ least problem exposed.

$(document).ready(function() {    $("#candy input[type=checkbox]").on("change", function() {      if (this.checked) {        $(this).parents('tr').addclass('selected');        $('#dd').removeclass('selected');          updateselectioncounter();      } else {        $('#bbbbbb').prop('checked', false);        $(this).parents('tr').removeclass('selected');        $('#dd').removeclass('selected');          updateselectioncounter();      }    });      $('#bbbbbb').click(function() {      var checked = $("#bbbbbb").is(':checked');      $(".asdf").each(function() {        $(this).prop('checked', checked);        if (checked) {          $(this).parents('tr').addclass('selected');          $('#dd').removeclass('selected');        } else {          $(this).parents('tr').removeclass('selected');          $('#dd').removeclass('selected');        }      });    });    });    $(document).ready(function() {    updateselectioncounter();  });      $("#bbbbbb input:checkbox").on("click", function() {    updateselectioncounter();  });    $(".item input:checkbox").on("change", function() {    updateselectioncounter();  });    function updateselectioncounter() {    settimeout(function(){      var selectedrows = $(".item input[name='nameselected']:checked").length;      var totalrows = $(".item").length;      $("#selectionrows").text(selectedrows + ' of ' + totalrows + ' selected rows');    }, 350);  }

tr.selected {    background-color: #fef0bf;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <table id="candy" >    <tr id="dd">      <th id="rowlength"><input type="checkbox" id="bbbbbb" /></th>      <th width="20">a</th>      <th width="20">b</th>      <th width="20">c</th>      <th width="20"">d</th>      <th width="20">e</th>      <th width="20">f</th>      <th width="20">g</th>      <th width="20">h</th>    </tr>    <tr class = "item">      <td><input type="checkbox" class="asdf" name="nameselected"  /></td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>      <td>v</td>                                     </tr>    <tr class = "item">      <td><input type="checkbox" class="asdf" name="nameselected" /></td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>      <td>e</td>                                      </tr>      <tr class = "item">      <td><input type="checkbox" class="asdf" name="nameselected" /></td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>      <td>q</td>                                      </tr>  </table>  <br/>  <div id="selectionrows"></div>