Я пытаюсь создать динамический контрольный список с индикатором загрузки. Вот мой код разметки
<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);
});
}
});
});