Decrementing progress bar

Question

I'm planning to add a progress message at the top of the progress bar. However, I encountered a problem when decrementing. If all checkboxes are unchecked, the value of the checkbox stays, and it wont decrement to 0.

Here is 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

Issue is very small, it does not get 0 value because each checkbox has value 20. I have simplified it here:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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" >
    <input id="input2" type="checkbox" name="completed2" >
    <input id="input3" type="checkbox" name="completed3" >
    <input id="input4" type="checkbox" name="completed4" >
    <input id="input5" type="checkbox" name="completed5" >
</div>

Please note: I think its not necessary to hard code values in the html instead we can write whole logic in javascript itself. With this approach there are few main advantages:

1. You can assign real values to each checkbox.
2. Maintainability will be easier.
3. If you keep more/less controls then you can change your logic. e.g. 100/numberofcontrols

Cheers, Ashok

Answer 2

Instead of iterating over each of the checked elements, you can get the number of checked inputs directly.

$('input').on('change', function() {
    var numInputs = $('input').length;
    var numChecked = $('input:checked').length;
    var percentageChecked = numChecked * (100/numInputs);

    $("p.progress_count").html( "Progress: " + percentageChecked  +'%');
    $('.progress-bar').css('width', percentageChecked  + '%').attr('aria-valuenow', percentageChecked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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 3

I moved $("p.progress_count").html("Progress: " + emptyValue + '%'); outside of the loop and it now goes to 0% when all boxes are unchecked.

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