javascript - 递减进度条

我打算在进度条的顶部添加进度消息。但是，递减时遇到问题。如果所有复选框都未选中，则复选框的值保持不变，并且不会递减为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>

最佳答案

我将$("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>