javascript - 递减进度条

Question

我计划在进度栏顶部添加进度消息。然而，我在递减的时候遇到了问题。如果所有复选框均未选中，则复选框的值保持不变，并且不会递减至 0。

这里是the fiddle 。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<p class="progress_count">Progress: 0%</p>
<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>

Answer 1

我将 $("p.progress_count").html("Progress: "+emptyValue + '%'); 移到了循环之外，现在当所有框都已打开时，它会变为 0%未经检查。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<p class="progress_count">Progress: 0%</p>
<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>