Dynamically change bootstrap progress bar value when checkboxes checked

Question

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);       });     }   }); }); 

Answer 1

Try this maybe :

Bootply : http://www.bootply.com/106527

Js :

$('input').on('click', function(){   var valeur = 0;   $('input:checked').each(function(){        if ( $(this).attr('value') > valeur )        {            valeur =  $(this).attr('value');        }   });   $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);     }); 

HTML :

 <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>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>         </div>         <div class="col-md-2">           <label>2014-01-29</label>         </div>         <div class="col-md-2">           <input name="progress" class="progress" type="checkbox" value="10">         </div>         <div class="col-md-2">           <input name="done" class="done" type="checkbox" value="20">         </div>       </div><!-- tasks -->  <div class="row tasks">         <div class="col-md-6">           <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be sure that you’ll have tangible results to share with the world (or your boss) at the end of your campaign.</p>         </div>         <div class="col-md-2">           <label>2014-01-25</label>         </div>         <div class="col-md-2">           <input name="progress" class="progress" type="checkbox" value="30">         </div>         <div class="col-md-2">           <input name="done" class="done" type="checkbox" value="40">         </div>       </div><!-- tasks --> 

Css

.tasks{     background-color: #F6F8F8;     padding: 10px;     border-radius: 5px;     margin-top: 10px; } .tasks span{     font-weight: bold; } .tasks input{     display: block;     margin: 0 auto;     margin-top: 10px; } .tasks a{     color: #000;     text-decoration: none;     border:none; } .tasks a:hover{     border-bottom: dashed 1px #0088cc; } .tasks label{     display: block;     text-align: center; } 

$(function(){  $('input').on('click', function(){    var valeur = 0;    $('input:checked').each(function(){         if ( $(this).attr('value') > valeur )         {             valeur =  $(this).attr('value');         }    });    $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur);      });    });

.tasks{  	background-color: #F6F8F8;  	padding: 10px;  	border-radius: 5px;  	margin-top: 10px;  }  .tasks span{  	font-weight: bold;  }  .tasks input{  	display: block;  	margin: 0 auto;  	margin-top: 10px;  }  .tasks a{  	color: #000;  	text-decoration: none;  	border:none;  }  .tasks a:hover{  	border-bottom: dashed 1px #0088cc;  }  .tasks label{  	display: block;  	text-align: center;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>     <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>Identify your campaign audience.</span>Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.</p>          </div>          <div class="col-md-2">            <label>2014-01-29</label>          </div>          <div class="col-md-2">            <input name="progress" class="progress" type="checkbox" value="10">          </div>          <div class="col-md-2">            <input name="done" class="done" type="checkbox" value="20">          </div>        </div><!-- tasks -->    <div class="row tasks">          <div class="col-md-6">            <p><span>Set your goals + benchmarks</span>Having SMART goals can help you be  sure that you’ll have tangible results to share with the world (or your  boss) at the end of your campaign.</p>          </div>          <div class="col-md-2">            <label>2014-01-25</label>          </div>          <div class="col-md-2">            <input name="progress" class="progress" type="checkbox" value="30">          </div>          <div class="col-md-2">            <input name="done" class="done" type="checkbox" value="40">          </div>        </div><!-- tasks -->

Answer 2

Bootstrap 4 progress bar

<div class="progress"> <div class="progress-bar" role="progressbar" style="" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div> </div> 

Javascript

change progress bar on next/previous page actions

var count = Number(document.getElementById('count').innerHTML); //set this on page load in a hidden field after an ajax call var total = document.getElementById('total').innerHTML; //set this on initial page load var pcg = Math.floor(count/total*100);         document.getElementsByClassName('progress-bar').item(0).setAttribute('aria-valuenow',pcg); document.getElementsByClassName('progress-bar').item(0).setAttribute('style','width:'+Number(pcg)+'%');