【发布时间】：2014-02-06 13:21:44
【问题描述】：
我正在尝试使用引导进度条制作动态清单。这是我的标记代码
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
<div class="row tasks">
<div class="col-md-6">
<p><span><?php echo $title; ?></span><?php echo $description; ?></p>
</div>
<div class="col-md-2">
<label><?php echo $date; ?></label>
</div>
<div class="col-md-2">
<input type="checkbox" name="progress" class="progress" value="<?php echo $progress; ?>">
</div>
<div class="col-md-2">
<input type="checkbox" name="done" class="done" value="<?php echo $done; ?>">
</div>
</div><!-- tasks -->
我想要做的是，当我选中第一个复选框时，进度条值更改为复选框值，当我选中第二个复选框时，进度条值必须增加第二个复选框值，依此类推
这是我的 javascript 代码
$(document).ready(function() {
$('.progress').change(function(event) {
var progress_value = $(this).val();
var newval = progress_value;
if ($(this).is(':checked')) {
$('.progress-bar').css("width", function(i) {
while(newval < 100) {
return newval+"%";
newval+=progress_value;
}
});
} else {
$('.progress-bar').css("width", function(i) {
do {
newval -= progress_value;
return newval+"%";
} while(newval >= progress_value);
});
}
});
});
【问题讨论】：
标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 progress-bar