Javascript 如何获取表单标记内选中的复选框的计数并在进度栏中显示百分比？

我想根据选中的

复选框的计数更新进度条。当选中和取消选中
复选框时，它应该不断更新。最好使用进度条的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>

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

要以最简单的方式实现这一点，只需使用
change
事件处理程序并计算出复选框占总数的百分比。然后可以将进度条宽度设置为该宽度。试试这个：


$（文档）.ready（函数（）{
变量$checkbox=$（'.checkbox'）；
var$progress=$（“#检查进度”）；
var total=$checkbox.length；
$checkbox.on（'change'，function（）{
var checked=$checkbox.filter（':checked'）.length；
var progressWidth=（已检查/总计）*100；
$（'.progressbar'）.css（'width'，progressWidth+'%'）；
});
});
。进度条{宽度：0；}


选择全部
项目1
项目2
项目3
项目4
项目5
项目6

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

要以最简单的方式实现这一点，只需使用
change
事件处理程序并计算出复选框占总数的百分比。然后可以将进度条宽度设置为该宽度。试试这个：


$（文档）.ready（函数（）{
变量$checkbox=$（'.checkbox'）；
var$progress=$（“#检查进度”）；
var total=$checkbox.length；
$checkbox.on（'change'，function（）{
var checked=$checkbox.filter（':checked'）.length；
var progressWidth=（已检查/总计）*100；
$（'.progressbar'）.css（'width'，progressWidth+'%'）；
});
});
。进度条{宽度：0；}


选择全部
项目1
项目2
项目3
项目4
项目5
项目6

按以下步骤操作

创建一个函数，每当更改复选框时，该函数都会更改进度，“查找所有复选框”和“选中复选框”，并在获得百分比后设置进度


$（文档）.ready（函数（）{
功能进展（）{
var checked=$（'input:checkbox:checked:not（“#select_all”））。长度；
变量计数=$（'input:checkbox'）。长度；
如果（$（'#全选：复选框：选中'）。长度>0）{
检查=计数；
}
如果（选中==0）{
var结果=0；
}否则{
var结果=（选中*100）/计数；
}
$（'.progress bar'）.css（'width'，result+'%'）.attr（'aria-valuenow'，result）；
}
进步（）；
$（文档）.on（'change'，'input'，函数（e）{
进步（）；
})
});


选择全部
项目1
项目2
项目3
项目4
项目5
项目6

按以下步骤操作

创建一个函数，每当更改复选框时，该函数都会更改进度，“查找所有复选框”和“选中复选框”，并在获得百分比后设置进度


$（文档）.ready（函数（）{
功能进展（）{
var checked=$（'input:checkbox:checked:not（“#select_all”））。长度；
变量计数=$（'input:checkbox'）。长度；
如果（$（'#全选：复选框：选中'）。长度>0）{
检查=计数；
}
如果（选中==0）{
var结果=0；
}否则{
var结果=（选中*100）/计数；
}
$（'.progress bar'）.css（'width'，result+'%'）.attr（'aria-valuenow'，result）；
}
进步（）；
$（文档）.on（'change'，'input'，函数（e）{
进步（）；
})
});


选择全部
项目1
项目2
项目3
项目4
项目5
项目6

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


jQuery（'#btnTest'）。单击（函数（）{
var i=0；
var total_复选框=0；
检查的var百分比；
//“使用类名获取所有复选框”复选框
total_checkbox=jQuery（'#checbox_holder input[type=“checkbox”].checkbox'）。长度；
//console.log（总复选框）；
//现在迭代#checboxu holder div中的每个复选框
jQuery（'#checbox_holder input[type=“checkbox”]”）。每个（函数（）{
//检查是否有带有类名复选框的复选框
if（jQuery（this）.hasClass（'checkbox'））{
//检查复选框是否选中
if（jQuery（this）.prop（“checked”）==true）{
//增加已检查支票盒的数量；
i++；
}      
}    
});
//计算选中复选框的百分比
选中百分比=（i/总复选框）*100；
//控制台日志（检查的百分比）；
//控制台日志（i）；
//为进度条指定宽度
jQuery（'#CheckProgress'）.css（'width'，percent_checked+'%'）；
});
。进度{
宽度：100%；
边框：2个实心#ccc；
}
progr先生
$(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);
});