Javascript 使用复选框递增引导进度条

试图弄清楚如何使用由选中/未选中复选框定义的增量设置引导进度条的动画。我有一个复选框一次工作，但似乎无法弄清楚如何让他们所有添加到以前的数额

i、 e如果我点击2个复选框，40%将显示在进度条上，3个复选框60%等。提前感谢

HTML

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
  </div>
</div>

 <div class="panelBody" id="panelBody1">

      <input id="input1" type="checkbox" name="completed1" value="20">
      <input id="input2" type="checkbox" name="completed2" value="20">
      <input id="input3" type="checkbox" name="completed3" value="20">
      <input id="input4" type="checkbox" name="completed4" value="20">
      <input id="input5" type="checkbox" name="completed5" value="20">

</div>

---

添加值后，请尝试以下操作：

$('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});

---

出于好奇。。。为什么？

$('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});