68

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

2 Answers 2

112

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

7
  • 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. Commented Jan 17, 2014 at 10:31
  • Can you provide a fiddle with two checkbox groups please ? Commented Jan 17, 2014 at 10:33
  • For each input you have to set the value to send to navbar : ( input value="40" )... look here : bootply.com/106527 Commented Jan 17, 2014 at 12:23
  • 3
    Don't forget to wrap your JS with $(document).ready(function() { .. }), otherwise it might not work!
    – BornToCode
    Commented Dec 25, 2014 at 13:43
  • 1
    This worked for me: $('.progress-bar').css('width', valeur+'%').attr('aria-valuenow', valeur).html(valeur+'%');
    – LobsterMan
    Commented Mar 16, 2015 at 9:40
21

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)+'%');
1
  • 4
    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
    Commented Mar 1, 2021 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.