title: Using check boxes to update progress bar : Jquery
body: <p>At the moment I have a check list that updates the progress bar once a check-box is clicked, however, I want the progress bar to update according to whatever the percentage is on the check-box. I have spent hours looking for a solution and trying different things but have had no luck. Any help or advice?</p>
  
  <p>DEMO= <a href="http://jsfiddle.net/UznQe/" rel="nofollow">http://jsfiddle.net/UznQe/</a></p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Bars for checklist&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width"/&gt;
   &lt;link rel="stylesheet" href="themes/theme1.min.css" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
  
      &lt;meta charset="utf-8"&gt;
  
  
  
      &lt;link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" /&gt;
  
  
      &lt;script src="jqm/demos/js/jquery.js"&gt;
      &lt;/script&gt;
  
      &lt;script src="jqm/demos/js/jquery.mobile-1.3.2.min.js"&gt;
      &lt;/script&gt;
  
      &lt;script&gt;
  
  
          $(document).on('pagebeforeshow', '#checklist', function () {
              $('input[type="checkbox"]').each(function () {
                  ($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
              });
          });
  
  
          $(document).on('click', '.checkBoxLeft', function () {
              if ($(this).find('input[type="checkbox"]').is(':checked')) {
                  $(this).removeClass('checked').addClass('not-checked');
                  $(this).find('input[type="checkbox"]').attr('checked', false);
              } else {
                  $(this).removeClass('not-checked').addClass('checked');
                  $(this).find('input[type="checkbox"]').attr('checked', true);
              }
  
  
              var total = $("#theList input[type=checkbox]").length;
              var numChecked = $("#theList input[type=checkbox]:checked").length;
              if (numChecked == 1) {
                  $("#progress").css('background', 'red');
  
              } else if (numChecked == 2) {
                  $("#progress").css('background', 'orange');
              } else if (numChecked == 3) {
                  $("#progress").css('background', 'yellow');
              } else {
                  $("#progress").css('background', 'lime');
              }
              var prog = numChecked * 100 / total;
              $("#progress").css("width", prog + "%");
  
  
          });
  
  
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  
  
  
       &lt;div data-role="main" class="ui-content"&gt;
      &lt;div data-role="collapsible"&gt;
        &lt;h1&gt;Task list&lt;/h1&gt;
  
  
  
  
          &lt;div data-role="content"&gt;
              &lt;ul data-role="listview" id="theList" data-inset="true"&gt;
                  &lt;li&gt;
  
  
  
                      &lt;div class="checkBoxLeft"&gt;
                          &lt;input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/&gt;
                      &lt;/div&gt;                    
                      &lt;a href="" class="detailListText"&gt;Task 1 (15%)&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="checkBoxLeft"&gt;
                          &lt;input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/&gt;
                      &lt;/div&gt;                     
                      &lt;a href="" class="detailListText"&gt;Task 2 (40%)&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;div class="checkBoxLeft"&gt;
                          &lt;input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/&gt;
                      &lt;/div&gt;                     
                      &lt;a href="" class="detailListText"&gt;Task 3 (5%)&lt;/a&gt;
                  &lt;/li&gt;
                   &lt;li&gt;
                      &lt;div class="checkBoxLeft"&gt;
                          &lt;input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/&gt;
                      &lt;/div&gt;                     
                      &lt;a href="" class="detailListText"&gt;Task 4 (10%)&lt;/a&gt;
                  &lt;/li&gt;
                   &lt;li&gt;
                      &lt;div class="checkBoxLeft"&gt;
                          &lt;input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/&gt;
                      &lt;/div&gt;                     
                      &lt;a href="" class="detailListText"&gt;Task 5 (15%)&lt;/a&gt;
                  &lt;/li&gt;
                   &lt;li&gt;
                      &lt;div class="checkBoxLeft"&gt;
                          &lt;input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/&gt;
                      &lt;/div&gt;                     
                      &lt;a href="" class="detailListText"&gt;Task 6 (15%)&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
              &lt;div class="meter green nostripes"&gt;
                  &lt;span id="progress" style="width: 0%"&gt;&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
  
  
  
  
          &lt;style&gt;
  
              .detailListText{
      margin: 0 0 0 20px;
  }
  
  .checkBoxLeft{
      position: absolute; 
      left: 10px; 
      top: 28%;
      width: 18px;
      height: 18px;
      background: #d9d9d9;
      border-radius: 3px;  
  }
  
  
  
  .hidden-checkbox {
      display: none;
  }
  
  
  .not-checked {
      background-position: 18px 0;   
      background-color:#d9d9d9;
  }
  
  
  .checked {
      background-position: 0 0;   
      background-color:#6496bc;    
  }
  
          .meter { 
              height: 20px;
              position: relative;
              margin: 60px 0 20px 0;
              background: #555;
              -moz-border-radius: 25px;
              -webkit-border-radius: 25px;
              border-radius: 25px;
              padding: 10px;
              -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
              -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
              box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
          }
          .meter &gt; span {
              display: block;
              height: 100%;
                 -webkit-border-top-right-radius: 8px;
              -webkit-border-bottom-right-radius: 8px;
                     -moz-border-radius-topright: 8px;
                  -moz-border-radius-bottomright: 8px;
                         border-top-right-radius: 8px;
                      border-bottom-right-radius: 8px;
                  -webkit-border-top-left-radius: 20px;
               -webkit-border-bottom-left-radius: 20px;
                      -moz-border-radius-topleft: 20px;
                   -moz-border-radius-bottomleft: 20px;
                          border-top-left-radius: 20px;
                       border-bottom-left-radius: 20px;
              background-color: rgb(43,194,83);
              background-image: -webkit-gradient(
                linear,
                left bottom,
                left top,
                color-stop(0, rgb(43,194,83)),
                color-stop(1, rgb(84,240,84))
               );
              background-image: -moz-linear-gradient(
                center bottom,
                rgb(43,194,83) 37%,
                rgb(84,240,84) 69%
               );
              -webkit-box-shadow: 
                inset 0 2px 9px  rgba(255,255,255,0.3),
                inset 0 -2px 6px rgba(0,0,0,0.4);
              -moz-box-shadow: 
                inset 0 2px 9px  rgba(255,255,255,0.3),
                inset 0 -2px 6px rgba(0,0,0,0.4);
              box-shadow: 
                inset 0 2px 9px  rgba(255,255,255,0.3),
                inset 0 -2px 6px rgba(0,0,0,0.4);
              position: relative;
              overflow: hidden;
          }
          .meter &gt; span:after, .animate &gt; span &gt; span {
              content: "";
              position: absolute;
              top: 0; left: 0; bottom: 0; right: 0;
              background-image: 
                 -webkit-gradient(linear, 0 0, 100% 100%, 
                    color-stop(.25, rgba(255, 255, 255, .2)), 
                    color-stop(.25, transparent), color-stop(.5, transparent), 
                    color-stop(.5, rgba(255, 255, 255, .2)), 
                    color-stop(.75, rgba(255, 255, 255, .2)), 
                    color-stop(.75, transparent), to(transparent)
                 );
              background-image: 
                  -moz-linear-gradient(
                    -45deg, 
                    rgba(255, 255, 255, .2) 25%, 
                    transparent 25%, 
                    transparent 50%, 
                    rgba(255, 255, 255, .2) 50%, 
                    rgba(255, 255, 255, .2) 75%, 
                    transparent 75%, 
                    transparent
                 );
              z-index: 1;
              -webkit-background-size: 50px 50px;
              -moz-background-size: 50px 50px;
              background-size: 50px 50px;
              -webkit-animation: move 2s linear infinite;
              -moz-animation: move 2s linear infinite;
                 -webkit-border-top-right-radius: 8px;
              -webkit-border-bottom-right-radius: 8px;
                     -moz-border-radius-topright: 8px;
                  -moz-border-radius-bottomright: 8px;
                         border-top-right-radius: 8px;
                      border-bottom-right-radius: 8px;
                  -webkit-border-top-left-radius: 20px;
               -webkit-border-bottom-left-radius: 20px;
                      -moz-border-radius-topleft: 20px;
                   -moz-border-radius-bottomleft: 20px;
                          border-top-left-radius: 20px;
                       border-bottom-left-radius: 20px;
              overflow: hidden;
          }
  
          .animate &gt; span:after {
              display: none;
          }
  
  
  
          &lt;/style&gt;
      &lt;/div&gt;   
  &lt;/body&gt;
  &lt;/html&gt;    
  </code></pre>