📌  相关文章
📜  如何使进度条在选中的多个复选框上工作? - Javascript代码示例

📅  最后修改于: 2022-03-11 15:02:56.693000             🧑  作者: Mango

代码示例1
$('.card').each(function(index, el) {
  var chkLength = $(this).find('input[type="checkbox"]').length;
  var max = 100;
  var div = max / chkLength;
  $('.scrumboard .card .task-quantity').text('0/' + chkLength);
  $(this).find('input[type="checkbox"]').attr('value', div);
});

$('.card .new-control-input').on('change', function(event) {
  var $checkbox = $(this);

  $checkbox.closest('.card').find(".progress .progress-bar").css("width", function() {
    var width = $(this).data('width') || 0;
    if ($checkbox.is(':checked')) {
      width += parseInt($checkbox.val());
    } else {
      width -= parseInt($checkbox.val());
    }
    $(this).data('width', width);
    return width + "%";
  });
})