CODEWITHSUNDEEP
jqueryhtmlcheckbox
Owaiz Yusufi
Owaiz Yusufi

Reputation: 918

How to make progress bar work on multiple checkbox checked?

I have made a progress bar increment on checkbox checked. It works fine with single group of checkboxes but with multiple group of checkboxes it does not work as aspected.

What I want

I want if I use multiple card and in each card there would be multiple checkbox they all should work seperatly

$('.card').each(function(index, el) {
  // console.log( $(this).find('input[type="checkbox"]').length );
  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"]').append("<div>" + div +" </div>");
  $(this).find('input[type="checkbox"]').attr('value', div);
});

// Progress bar code
val = 0;
$('.card .new-control-input').on('change', function(event) {
  if ($(this).is(':checked')) {
    console.log('chk');
    // perc += parseInt($(this).val());
    // $(this).attr('checked', '');
    console.log(val += parseInt($(this).val()));
  } else {
    console.log('nchk');
    console.log(val -= parseInt($(this).val()));
  }

  $(".progress .progress-bar").each(function(index, el) {
    $(this).css("width", val + "%");
  });
})
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>
<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bgbbg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

Link

Upvotes: 0

Views: 1200

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337580

The issue is because you're updating all the .progress .progress-bar elements in the DOM when the checkbox change event fires. You instead need to use DOM traversal to find the progress bar related to the checkbox which raised the event. To achieve this you can use closest() to get the parent .card, then find().

You will also need to maintain each width individually, instead of the shared val variable. To do this you can use a data attribute which is stored directly on the progress bar. Try this:

$('.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 + "%";
  });
})
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

<div class="card">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <input type="checkbox" class="new-control-input">
  <div class="progress">
    <div class="progress-bar bgbbg-primary" role="progressbar" style="" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <p class="task-quantity"></p>
</div>

Upvotes: 3

Related Questions