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

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>

Answer 2

做如下

创建更改复选框时更改进度的函数，查找所有复选框和选中的复选框，并在获取百分比后设置进度。

 $(document).ready(function () { function progress(){ var checked = $('input:checkbox:checked:not("#select_all")').length; var count = $('input:checkbox').length; if( $('#select_all:checkbox:checked').length > 0 ){ checked = count; } if(checked == 0){ var result = 0; } else { var result = (checked * 100) / count; } $('.progress-bar').css('width', result+'%').attr('aria-valuenow', result); } progress(); $(document).on('change', 'input', function(e){ progress(); }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></span> </div>

Answer 3

请参阅以下示例以了解您的解决方案。

 jQuery('#btnTest').click(function(){ var i = 0; var total_checkboxes = 0; var percent_checked; // Get all checkboxes with class name checkbox total_checkboxes = jQuery('#checbox_holder input[type="checkbox"].checkbox').length; //console.log(total_checkboxes); // Now iterate over each checkbox inside #checbox_holder div jQuery('#checbox_holder input[type="checkbox"]').each(function(){ //Check if we have checkbox with class name checkbox if(jQuery(this).hasClass('checkbox')){ // CHeck if checkbox is checked or not if(jQuery(this).prop("checked") == true){ // Increment no of checked checboxes; i++; } } }); // Calculate percentage of checked checkboxs percent_checked = ( i / total_checkboxes ) * 100; //console.log(percent_checked); //console.log(i); //Assign width to the progress bar jQuery('#CheckProgress').css('width', percent_checked+'%'); });

 .progress{ width: 100%; border: 2px solid #ccc; } .progress-bar{ display: block; background: green; }

 <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 href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <div id="checbox_holder"> <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> <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> <button id="btnTest"> Test </button>