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

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 :

 

        

        
    

        

          
Identify your campaign audience.Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.
        
        

          2014-01-29
        
        

          
        
        

          
        
      



        

          
Set your goals + benchmarksHaving 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.
        
        

          2014-01-25
        
        

          
        
        

          
        
      

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

 

        

        
    

        

          
Identify your campaign audience.Who are we talking to here? Understand your buyer persona before launching into a campaign, so you can target them correctly.
        
        

          2014-01-29
        
        

          
        
        

          
        
      



        

          
Set your goals + benchmarksHaving 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.
        
        

          2014-01-25