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   lt div class  progress progress-striped active  gt       lt div class  progress-bar  role  progressbar  aria-valuenow  0  aria-valuemin  0  aria-valuemax  100  gt       lt  div gt   lt  div gt   lt div class  row tasks  gt       lt div class  col-md-6  gt           lt p gt  lt span gt  lt  php echo  title    gt  lt  span gt  lt  php echo  description    gt  lt  p gt       lt  div gt       lt div class  col-md-2  gt           lt label gt  lt  php echo  date    gt  lt  label gt       lt  div gt       lt div class  col-md-2  gt           lt input type  checkbox  name  progress  class  progress  value   lt  php echo  progress    gt   gt       lt  div gt       lt div class  col-md-2  gt           lt input type  checkbox  name  done  class  done  value   lt  php echo  done    gt   gt       lt  div gt   lt  div gt  lt  -- tasks -- gt    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  lt  100              return newval                newval  progress value                            else             progress-bar   css  width   function i            do             newval -  progress value            return newval                while newval  gt   progress value

User · Accepted Answer

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    gt  valeur                       valeur      this  attr  value                         progress-bar   css  width   valeur      attr  aria-valuenow   valeur             HTML      lt div class  progress progress-striped active  gt           lt div class  progress-bar  role  progressbar  aria-valuenow  0  aria-valuemin  0  aria-valuemax  100  gt           lt  div gt       lt  div gt   lt div class  row tasks  gt           lt div class  col-md-6  gt             lt p gt  lt span gt Identify your campaign audience  lt  span gt Who are we talking to here  Understand your buyer persona before launching into a campaign  so you can target them correctly  lt  p gt           lt  div gt           lt div class  col-md-2  gt             lt label gt 2014-01-29 lt  label gt           lt  div gt           lt div class  col-md-2  gt             lt input name  progress  class  progress  type  checkbox  value  10  gt           lt  div gt           lt div class  col-md-2  gt             lt input name  done  class  done  type  checkbox  value  20  gt           lt  div gt         lt  div gt  lt  -- tasks -- gt    lt div class  row tasks  gt           lt div class  col-md-6  gt             lt p gt  lt span gt Set your goals   benchmarks lt  span gt 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  lt  p gt           lt  div gt           lt div class  col-md-2  gt             lt label gt 2014-01-25 lt  label gt           lt  div gt           lt div class  col-md-2  gt             lt input name  progress  class  progress  type  checkbox  value  30  gt           lt  div gt           lt div class  col-md-2  gt             lt input name  done  class  done  type  checkbox  value  40  gt           lt  div gt         lt  div gt  lt  -- tasks -- gt    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       x000D   x000D    function    x000D     input   on  click   function    x000D    var valeur   0  x000D       input checked   each function    x000D         if     this  attr  value    gt  valeur   x000D           x000D             valeur      this  attr  value    x000D           x000D        x000D        progress-bar   css  width   valeur      attr  aria-valuenow   valeur       x000D      x000D   x000D      x000D   tasks  x000D   background-color   F6F8F8  x000D   padding  10px  x000D   border-radius  5px  x000D   margin-top  10px  x000D    x000D   tasks span  x000D   font-weight  bold  x000D    x000D   tasks input  x000D   display  block  x000D   margin  0 auto  x000D   margin-top  10px  x000D    x000D   tasks a  x000D   color   000  x000D   text-decoration  none  x000D   border none  x000D    x000D   tasks a hover  x000D   border-bottom  dashed 1px  0088cc  x000D    x000D   tasks label  x000D   display  block  x000D   text-align  center  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 0 jquery min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  rel  stylesheet   gt  x000D   x000D    lt div class  progress progress-striped active  gt  x000D           lt div class  progress-bar  role  progressbar  aria-valuenow  0  aria-valuemin  0  aria-valuemax  100  gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt div class  row tasks  gt  x000D           lt div class  col-md-6  gt  x000D             lt p gt  lt span gt Identify your campaign audience  lt  span gt Who are we talking to here  Understand your buyer persona before launching into a campaign  so you can target them correctly  lt  p gt  x000D           lt  div gt  x000D           lt div class  col-md-2  gt  x000D             lt label gt 2014-01-29 lt  label gt  x000D           lt  div gt  x000D           lt div class  col-md-2  gt  x000D             lt input name  progress  class  progress  type  checkbox  value  10  gt  x000D           lt  div gt  x000D           lt div class  col-md-2  gt  x000D             lt input name  done  class  done  type  checkbox  value  20  gt  x000D           lt  div gt  x000D         lt  div gt  lt  -- tasks -- gt  x000D   x000D   lt div class  row tasks  gt  x000D           lt div class  col-md-6  gt  x000D             lt p gt  lt span gt Set your goals   benchmarks lt  span gt Having SMART goals can help you be x000D  sure that you   ll have tangible results to share with the world  or your x000D  boss  at the end of your campaign  lt  p gt  x000D           lt  div gt  x000D           lt div class  col-md-2  gt  x000D             lt label gt 2014-01-25 lt  label gt  x000D           lt  div gt  x000D           lt div class  col-md-2  gt  x000D             lt input name  progress  class  progress  type  checkbox  value  30  gt  x000D           lt  div gt  x000D           lt div class  col-md-2  gt  x000D             lt input name  done  class  done  type  checkbox  value  40  gt  x000D           lt  div gt  x000D         lt  div gt  lt  -- tasks -- gt  x000D   x000D   x000D

User · Answer

Bootstrap 4 progress bar   lt div class  progress  gt   lt div class  progress-bar  role  progressbar  style    aria-valuenow    aria-valuemin  0  aria-valuemax  100  gt  lt  div gt   lt  div gt    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

[javascript] Dynamically change bootstrap progress bar value when checkboxes checked

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to progress-bar