Question

尝试弄清楚如何使用选中/未选中复选框定义的增量为引导程序进度条设置动画。我有一个复选框一次工作，但似乎无法弄清楚如何将所有这些复选框添加到以前的金额。

即如果我单击2个复选框，40％将显示在进度条上，3个复选框显示为60％，等等。提前感谢。

HTML

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

 <div class="panelBody" id="panelBody1">

      <input id="input1" type="checkbox" name="completed1" value="20">
      <input id="input2" type="checkbox" name="completed2" value="20">
      <input id="input3" type="checkbox" name="completed3" value="20">
      <input id="input4" type="checkbox" name="completed4" value="20">
      <input id="input5" type="checkbox" name="completed5" value="20">

</div>

JQuery的

$('input').on('click', function(){
  var emptyValue = 0;
  $('input:checked').each(function(){
       if ( $(this).attr('value') > emptyValue ) {
           emptyValue =  $(this).attr('value');
       }
  });

  $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);

});

Answer 1

添加值，试试这个：

$('input').on('click', function() {
    var emptyValue = 0;
    $('input:checked').each(function() {
        emptyValue += parseInt($(this).val());
    });
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});

jsFiddle

使用复选框增加Bootstrap进度条

1 个答案: