66

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);
      });
    }
  });
});
Community
  • 1
  • 1
Naveen Krishna
  • 715
  • 2
  • 6
  • 13

2 Answers2

109

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 -->
BENARD Patrick
  • 30,363
  • 16
  • 99
  • 105
  • Hey, thanks for the reply. By the way this works for the first group of checkboxes. But I'm using a loop to generate the checkbox groups. And I'm using the same classes "progress" and "done" for all the groups generated. The progressbar is not updated when checked the rest of the checkboxes. – Naveen Krishna Jan 17 '14 at 10:31
  • Can you provide a fiddle with two checkbox groups please ? – BENARD Patrick Jan 17 '14 at 10:33
  • For each input you have to set the value to send to navbar : ( input value="40" )... look here : http://bootply.com/106527 – BENARD Patrick Jan 17 '14 at 12:23
  • 3
    Don't forget to wrap your JS with $(document).ready(function() { .. }), otherwise it might not work! – BornToCode Dec 25 '14 at 13:43
  • 1
    This worked for me: `$('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur).html(valeur+'%');` – LobsterMan Mar 16 '15 at 09:40
  • This is a good answer and it works and I upvoted it. However, it seems as if there would be a more direct way of doing this in Bootstrap (at least in version 3.x). – raddevus Jan 09 '16 at 21:44
  • Bootstrap 3.x really doesn't have any helper for this??? – Csaba Toth Mar 01 '21 at 12:08
19

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)+'%');
Bruce Tong
  • 1,366
  • 15
  • 14
  • 2
    Unless you use Bootstrap native (which doesn't have jQuery) there's no reason to punish yourself with bare JS code like that. JQuery may not trendy any more but everyone should admit it's better readable and more concise. – Csaba Toth Mar 01 '21 at 12:11