web-dev-qa-db-ja.com

チェックボックスがオンになったときにbootstrap進捗バーの値を動的に変更します

bootstrap進行状況バーを使用して動的チェックリストを作成しようとしています。これが私のマークアップコードです

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

私がしたいのは、最初のチェックボックスをオンにするとプログレスバーの値がチェックボックスの値に変更され、2番目のチェックボックスをオンにすると、プログレスバーの値が2番目のチェックボックスの値だけ増加するということです

ここに私の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 < 100) {
          return newval+"%";
          newval+=progress_value;
        }
      });
    } else {
      $('.progress-bar').css("width", function(i) {
        do {
          newval -= progress_value;
          return newval+"%";
        } while(newval >= progress_value);
      });
    }
  });
});
javascriptjquerytwitter-bootstraptwitter-bootstrap-3progress-bar
49
Naveen Krishna

多分これを試してください：

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 -->
88
Pimento Web

ブートストラップ4の進行状況バー

<div class="progress">
<div class="progress-bar" role="progressbar" style="" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Javascript

次/前のページアクションの進行状況バーを変更する

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)+'%');
0
Bruce Tong