javascript - 选择行在 IE 中不显示正确数量的选定行

Question

目标:
如果我选择主复选框 (id="bbbbbb")，无论我选择了一行还是多行，<div id="selectionRows"></div>应显示所有选定的行。

问题:
该功能在 IE 中不起作用，我曾尝试考虑如何解决它但我失败了。

谢谢!

$(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>

Answer 1

问题是在 IE 中 updateSelectionCounter() 是在复选框被选中之前执行的，所以当您再次调用该函数时，该函数只会看到所有 3 个选中的。

我在代码片段中“解决”了这个问题，在函数中添加了一个超时，向您展示问题所在，我正在寻找 IE 这样做不同于 chrome 和 firefox 的原因，如果我找到一个好的解决方案，我会上传这个答案，但有了这个我相信至少问题暴露了。

$(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>