title: Incrementing a Bootstrap Progress Bar with Checkboxes
body: <p>Trying to figure out how to animate a bootstrap progress bar with increments defined by checked/unchecked checkboxes. I have one checkbox working at a time, but cannot seem to figure out how to get all of them to add to the previous amount. </p>
  
  <p>i.e if I click 2 checkboxes, 40% would be shown on the progress bar, 3 checkboxes 60%, etc. Thanks in advance.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="progress"&gt;
    &lt;div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
   &lt;div class="panelBody" id="panelBody1"&gt;
  
        &lt;input id="input1" type="checkbox" name="completed1" value="20"&gt;
        &lt;input id="input2" type="checkbox" name="completed2" value="20"&gt;
        &lt;input id="input3" type="checkbox" name="completed3" value="20"&gt;
        &lt;input id="input4" type="checkbox" name="completed4" value="20"&gt;
        &lt;input id="input5" type="checkbox" name="completed5" value="20"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$('input').on('click', function(){
    var emptyValue = 0;
    $('input:checked').each(function(){
         if ( $(this).attr('value') &gt; emptyValue ) {
             emptyValue =  $(this).attr('value');
         }
    });
  
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
  
  });
  </code></pre>