javascript - 使用复选框增加 Bootstrap 进度条

Question

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

即如果我点击 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>

JQuery

$('input').on('click', function(){
  var emptyValue = 0;
  $('input:checked').each(function(){
       if ( $(this).attr('value') > emptyValue ) {
           emptyValue =  $(this).attr('value');
       }
  });

  $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);

});

Answer 1

添加值，试试这个:

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

jsFiddle