减少进度条

Question

我打算在进度条的顶部添加进度消息。但是，我在减少时遇到了问题。如果取消选中所有复选框，则复选框的值将保留，并且不会减少到0。

这是 the fiddle 。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

<p class="progress_count">Progress: 0%</p>
<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>

Answer 1

我将$("p.progress_count").html("Progress: " + emptyValue + '%');移到了循环之外，当取消选中所有框时，它现在变为0％。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<p class="progress_count">Progress: 0%</p>
<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>

Answer 2

您可以直接获取已检查输入的数量，而不是遍历每个已检查的元素。

＆＃13;

＆＃13;

$('input').on('change', function() {
    var numInputs = $('input').length;
    var numChecked = $('input:checked').length;
    var percentageChecked = numChecked * (100/numInputs);

    $("p.progress_count").html( "Progress: " + percentageChecked  +'%');
    $('.progress-bar').css('width', percentageChecked  + '%').attr('aria-valuenow', percentageChecked);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<p class="progress_count">Progress: 0%</p>
<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

问题非常小，它没有得到0值，因为每个复选框都有值20.我在这里简化了它：

$('input').on('click', function() {
    var emptyValue = $('input:checked').length*20;
   $("p.progress_count").html( "Progress: "+ emptyValue +'%' );
   
    $('.progress-bar').css('width', emptyValue + '%').attr('aria-valuenow', emptyValue);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<p class="progress_count">Progress: 0%</p>
<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" >
    <input id="input2" type="checkbox" name="completed2" >
    <input id="input3" type="checkbox" name="completed3" >
    <input id="input4" type="checkbox" name="completed4" >
    <input id="input5" type="checkbox" name="completed5" >
</div>

请注意：我认为没有必要在html中硬编码值，而是我们可以在javascript中编写整个逻辑。采用这种方法几乎没有什么主要优势：

1. 您可以为每个复选框指定实际值。
2. 可维护性将更容易。
3. 如果你保持更多/更少的控制，那么你可以改变你的逻辑。例如100 / numberofcontrols

干杯， 阿肖克