Modifica dynamicmente il valore della barra di avanzamento bootstrap quando le checkboxes sono selezionate

Sto provando a creare una checklist dynamic con barra di avanzamento bootstrap. Ecco il mio codice di markup

Quello che voglio fare è quando controllo la prima casella di controllo il valore della barra di avanzamento è cambiato nel valore della casella di controllo, e quando controllo la seconda, il valore della barra di progressione deve aumentare del valore della seconda casella di controllo e così via

Ecco il mio codice 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 =progress_value); }); } }); }); 

Prova questo forse:

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.

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.

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.

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.