I'm trying to make a dynamic checklist with bootstrap progress bar. Here's my markup code
<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 -->
What I want to do is when I check on the first checkbox the progressbar value is changed to the checkbox value, and when I check the second one, progressbar value must increment by the second checkbox value and so on
Here's my javascript code
$(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);
});
}
});
});
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
