javascript - 如何获取在表单标签内选中的复选框的数量并在进度条中显示百分比？

Question

我想根据选中的checkboxes 的数量来更新进度条。它应该在 checkboxes 选中和取消选中时不断更新。最好使用它的 id 来识别进度条。

这是我的 Html 代码

<ul>
  <li><input type="checkbox" id="select_all"/> Selecct All</li>
  <li><input class="checkbox" type="checkbox">  Item 1</li>
  <li><input class="checkbox" type="checkbox">  Item 2</li>
  <li><input class="checkbox" type="checkbox">  Item 3</li>
  <li><input class="checkbox" type="checkbox">  Item 4</li>
  <li><input class="checkbox" type="checkbox">  Item 5</li>
  <li><input class="checkbox" type="checkbox">  Item 6</li>
</ul>
<div class="progress">
  <span class="progress-bar progress-bar-striped bg-success" id="CheckProgress" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span>
</div>

这是我的javascript

$(document).ready(function () {
  var count = 0;
  var checked = 0;
  function countboxes() {
    count = $("input[type='checkbox']").length;
    console.log(count);
  }
  countboxes();
  $(":checkbox").click(countBoxes);
  function countChecked() {
    checked = $("input:checked").length;
    var percentage = parseInt(((checked / count) * 100));
    $(".CheckProgress").progress({
      value: percentage
    });
    $("#CheckProgress").css("width", percentage + "%");
  }
  countChecked();
  $(":checkbox").click(countChecked);
});

Answer 1

首先，您定义的函数名称为 countboxes()，而不是 countBoxes()，并且 JS 区分大小写。此外，jQuery 中没有默认的 progress() 方法，jQueryUI 或 Bootstrap 中也没有。您也不需要它，因为您所做的只是将进度条的宽度设置为给定的百分比值。

要以最简单的方式执行此操作，您只需使用 change 事件处理程序并计算出选中框占总数的百分比。然后你可以设置进度条的宽度。试试这个:

$(document).ready(function() {
  var $checkboxes = $('.checkbox');
  var $progress = $('#CheckProgress');
  var total = $checkboxes.length;
  
  $checkboxes.on('change', function() {
    var checked = $checkboxes.filter(':checked').length;
    var progressWidth = (checked / total) * 100;
    $('.progress-bar').css('width', progressWidth + '%');
  });
});

.progress-bar { width: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<ul>
  <li><input type="checkbox" id="select_all" /> Selecct All</li>
  <li><input class="checkbox" type="checkbox"> Item 1</li>
  <li><input class="checkbox" type="checkbox"> Item 2</li>
  <li><input class="checkbox" type="checkbox"> Item 3</li>
  <li><input class="checkbox" type="checkbox"> Item 4</li>
  <li><input class="checkbox" type="checkbox"> Item 5</li>
  <li><input class="checkbox" type="checkbox"> Item 6</li>
</ul>
<div class="progress">
  <span class="progress-bar progress-bar-striped bg-success" id="CheckProgress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></span>
</div>