Dynamicznie zmieniaj wartość paska postępu ładowania początkowego przy zaznaczonych polach wyboru
Próbuję stworzyć dynamiczną listę kontrolną z paskiem postępu bootstrap. Oto mój kod znaczników
<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 -->
Co chcę zrobić, gdy sprawdzam w pierwszym polu wyboru, wartość paska postępu jest zmieniana na wartość pola wyboru, a gdy sprawdzam drugą, wartość paska postępu musi zwiększać się o drugą wartość pola wyboru i tak dalej
Oto mój kod 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);
});
}
});
});