Jquery ui 使用复选框更新进度栏：Jquery

目前，我有一个复选列表，在单击复选框后更新进度条，但是，我希望进度条根据复选框上的百分比进行更新。我花了数小时寻找解决方案，尝试了不同的事情，但都没有运气。有什么帮助或建议吗

演示=

更新

不计算复选框的数量，而是将复选框的值相加：

 //calculate percentage
 perc = 0;
 $("#theList input[type=checkbox]:checked").each(function( index ) {
     perc += parseInt($(this).val());         
 });

 if (perc < 15) {
     $("#progress").css('background', 'red');
 } else if (perc < 30) {
     $("#progress").css('background', 'orange');
 } else if (perc < 60) {
     $("#progress").css('background', 'yellow');
 } else {
     $("#progress").css('background', 'lime');
 }

 $("#progress").css("width", perc + "%");

parseInt$this.val为您提供了值的整数表示形式。

这里有一个检查示例

<form>
  <p>
    <input type="checkbox" name = "box1"/>
    <input type="checkbox"name = "box2" />
    <input type="checkbox" name = "box3"/>
  </p>
</form>
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
</div>
<div class = "ready"></div>

通过CSS应用的进度条更改

body { margin: 20px 50px; }
h1 { font-size: 1.5em; }
p { margin: 0; }
input[type="checkbox"] { 
  height: 20px; 
  width: 20px; 
  margin-right: 10px;
}   

.ready { font-size: 1.5em; }
.ui-progressbar-value { background: lightgreen; }
.progressbar-container {
  position: relative;
  width: 350px; 
}

.progressbar-bar { 
  height: 25px;
margin: 10px 0;
border-radius: 7px;
}

.progressbar-label {
  position: absolute;
  top: 2px;
  left: 45%;
  z-index: 2;
}

---

那么当你执行这段代码时会发生什么呢？现在有6个复选框，当我点击其中的3个时，进度条已经满了一半。我希望进度条根据每个复选框的值进行更新。

$(document).ready(function() {

  // get box count
  var count = 0;
  var checked = 0;
  function countBoxes() { 
    count = $("input[type='checkbox']").length;
    console.log(count);
  }

  countBoxes();
  $(":checkbox").click(countBoxes);

  // count checks

  function countChecked() {
    checked = $("input:checked").length;

    var percentage = parseInt(((checked / count) * 100),10);
    $(".progressbar-bar").progressbar({
            value: percentage
        });
    $(".progressbar-label").text(percentage + "%");
  }

  countChecked();
  $(":checkbox").click(countChecked);
});

body { margin: 20px 50px; }
h1 { font-size: 1.5em; }
p { margin: 0; }
input[type="checkbox"] { 
  height: 20px; 
  width: 20px; 
  margin-right: 10px;
}   

.ready { font-size: 1.5em; }
.ui-progressbar-value { background: lightgreen; }
.progressbar-container {
  position: relative;
  width: 350px; 
}

.progressbar-bar { 
  height: 25px;
margin: 10px 0;
border-radius: 7px;
}

.progressbar-label {
  position: absolute;
  top: 2px;
  left: 45%;
  z-index: 2;
}