Question 10743 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery sum and subtract prices from checkbox with initial price with category

[![enter image description here][1]][1] i want if check "pilih semua" then total use price "pilih semua"
but if not check "pilih semua " then price += item
please help me

this sample
i want if check all then price 1000 not 1900
please help me, please help me, please help me, please help me, please help me, please help me, please help me, please help me, please help me

                                                $(document).ready(function() {
                                  var checkboxes = document.querySelectorAll('input.subOption1'),
                                    checkall = document.getElementById('option1');

                                  for (var i = 0; i < checkboxes.length; i++) {

                                    checkboxes[i].onclick = function() {
                                      var checkedCount = document.querySelectorAll('input.subOption1:checked').length;

                                      checkall.checked = checkedCount > 0;
                                      checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;

                                    }
                                  }


                                  checkall.onclick = function() {
                                    for (var i = 0; i < checkboxes.length; i++) {
                                      checkboxes[i].checked = this.checked;
                  
                                    }

                                  }


                                  $('input:checkbox').change(function() {

                                    var total = 0;
                                    var totalkat = 0;

                                    $("input[name='id_kat_lab[]']:checked").each(function() { // iterate through each checked element.
                                      totalkat += isNaN(parseInt($(this).data('harga'))) ? 0 : parseInt($(this).data('harga'));
                                    });

                                    $("input[name='id_item[]']:checked").each(function() { // iterate through each checked element.
                                      total += isNaN(parseInt($(this).data('harga'))) ? 0 : parseInt($(this).data('harga'));
                                    });


                                    $("#totallab").val(totalkat + total);


                                  });
                                });
https://stackoverflow.com/posts/76002314/edit#
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row gutters">
                            <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-12 tesrow">
                                
                                <div class="card tes">
                                   
                                    <div class="card-body tes-body" id="kompatibility">
                                       

                                        <ul class="list-group m-0 komp">
                                            <li class="liutama" >
                                               Categori 1
                                            </li>

                                             <li class="komp list-group-item d-flex justify-content-between align-items-center">
                                                <input id="option1" name="id_kat_lab[]" type="checkbox" value="1" data-harga="1000" aria-label="...">


                                               All <span class="badge bg-primary rounded-pill"> 
                                                    Rp .1000
                                      </span>
                                            </li>
                                            
                                            <li class="komp list-group-item d-flex justify-content-between align-items-center ">
                                                <input class="subOption1" type="checkbox" name="id_item[]" value="1" aria-label="..." data-harga="200" >
                                                chicken <span class="badge bg-primary rounded-pill">Rp. 200
                                                
                                            </span>
                                            </li>

                                            <li class="komp list-group-item d-flex justify-content-between align-items-center ">
                                                <input class="subOption1" type="checkbox" name="id_item[]" value="2" aria-label="..." data-harga="400" >
                                                chicken 2 <span class="badge bg-primary rounded-pill">Rp. 400
                                                
                                            </span>
                                            </li>

                                            <li class="komp list-group-item d-flex justify-content-between align-items-center ">
                                                <input class="subOption1" type="checkbox" name="id_item[]" value="3" aria-label="..." data-harga="300" >
                                                chicken 3 <span class="badge bg-primary rounded-pill">Rp. 300
                                                
                                            </span>
                                            </li>

                                           
                                        </ul>
                                    </div>
                                </div>
                            </div>


                            

                         <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 ">
                    <div class="input-group">
                         <span class="input-group-text">
                                 Total
                            </span>
                           <input type="number" class="form-control" class="totallab" id="totallab">
                           
                        </div>

                  
                </div>
Tags:

2

Answers


  1. 0

    Just comment checkAll.onclick section to get a total = 1000.

    ...
checkall.onclick = function() {
//for (var i = 0; i < checkboxes.length; i++) {
//  checkboxes[i].checked = this.checked;
//  dikurang += parseInt(<?php echo $ro['hargas'];?>);
//}
}
...

    $(document).ready(function() {
    var checkboxes = document.querySelectorAll('input.subOption1'),
      checkall = document.getElementById('option1');



    var dikurang = 0;
    // var totalharga = $("#harga_kelompok<?php echo $no; ?>").val();

    // var numberNotChecked = $('input:checkbox:not(":checked")').length;

    for (var i = 0; i < checkboxes.length; i++) {

      checkboxes[i].onclick = function() {
        var checkedCount = document.querySelectorAll('input.subOption<?php echo $no; ?>:checked').length;

        checkall.checked = checkedCount > 0;
        checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;

      }
    }


    checkall.onclick = function() {
      //for (var i = 0; i < checkboxes.length; i++) {
      //  checkboxes[i].checked = this.checked;
        // dikurang += parseInt(<?php echo $ro['hargas'];?>);
      //}

    }

    // $('#checkbox_id').is(":checked"); 

    // var a= $('#option<?php echo $no; ?>').is(':checked');

    $('input:checkbox').change(function() {

      var total = 0;
      var totalkat = 0;

      $("input[name='id_kat_lab[]']:checked").each(function() { // iterate through each checked element.
        totalkat += isNaN(parseInt($(this).data('harga'))) ? 0 : parseInt($(this).data('harga'));
      });

      $("input[name='id_item[]']:checked").each(function() { // iterate through each checked element.
        total += isNaN(parseInt($(this).data('harga'))) ? 0 : parseInt($(this).data('harga'));
      });


      $("#totallab").val(totalkat + total);


    });
  });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row gutters">
    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-12 tesrow">

        <div class="card tes">

            <div class="card-body tes-body" id="kompatibility">


                <ul class="list-group m-0 komp">
                    <li class="liutama">
                        Categori 1
                    </li>

                    <li class="komp list-group-item d-flex justify-content-between align-items-center">
                        <input id="option1" name="id_kat_lab[]" type="checkbox" value="1" data-harga="1000" aria-label="..."> All <span class="badge bg-primary rounded-pill"> 
                                                    Rp .1000
                                      </span>
                    </li>

                    <li class="komp list-group-item d-flex justify-content-between align-items-center ">
                        <input class="subOption1" type="checkbox" name="id_item[]" value="1" aria-label="..." data-harga="200"> chicken <span class="badge bg-primary rounded-pill">Rp. 200
                                                
                                            </span>
                    </li>

                    <li class="komp list-group-item d-flex justify-content-between align-items-center ">
                        <input class="subOption1" type="checkbox" name="id_item[]" value="2" aria-label="..." data-harga="400"> chicken 2 <span class="badge bg-primary rounded-pill">Rp. 400
                                                
                                            </span>
                    </li>

                    <li class="komp list-group-item d-flex justify-content-between align-items-center ">
                        <input class="subOption1" type="checkbox" name="id_item[]" value="3" aria-label="..." data-harga="300"> chicken 3 <span class="badge bg-primary rounded-pill">Rp. 300
                                                
                                            </span>
                    </li>


                </ul>
            </div>
        </div>
    </div>




    <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 ">
        <div class="input-group">
            <span class="input-group-text">
                                 Total
                            </span>
            <input type="number" class="form-control" class="totallab" id="totallab">

        </div>


    </div>
</div>
    Login or Signup to reply.
  2. 0

    Just simplified your JS.

    Notice: Your sum of options is not equal to the Check All. So if you want the total to be sum of options just replace every showTotal(); with showTotal(priceList);.

    $(document).ready(function() {
  let checkall = document.getElementById('option1'), $checkboxes = $('input.subOption1'), priceList = [], $total = $("#totallab");
  $(document).on('change', 'input.subOption1', function(ev){
      if(ev.currentTarget.checked)
        priceList.push(+ev.currentTarget.dataset.harga || 0);
      else
        calculate();
      let filtered = $checkboxes.not(':checked').length;
      showTotal(priceList);
      checkall.checked = !filtered;
      checkall.indeterminate = filtered % $checkboxes.length;
      if(filtered == 0)
        showTotal();
  });
  $(document).on('change', '#option1', function(ev){
      $checkboxes.prop('checked', ev.currentTarget.checked);
      showTotal();
  });
  
  function showTotal(prices){
        if(prices == undefined)
          prices = [checkall.checked? +checkall.dataset.harga || 0 : 0];
        $total.val(prices.reduce((a, b) => a + b, 0));
  }
  
  function calculate(prices){
    priceList = [];
    $checkboxes.filter(':checked').each(function(i, el){
      priceList.push(+el.dataset.harga || 0);
    });
  }

});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row gutters">
  <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-12 tesrow">

    <div class="card tes">

      <div class="card-body tes-body" id="kompatibility">


        <ul class="list-group m-0 komp">
          <li class="liutama">
            Categori 1
          </li>

          <li class="komp list-group-item d-flex justify-content-between align-items-center">
            <input id="option1" name="id_kat_lab[]" type="checkbox" value="1" data-harga="1000" aria-label="..."> All <span class="badge bg-primary rounded-pill"> 
                                                    Rp .1000
                                      </span>
          </li>

          <li class="komp list-group-item d-flex justify-content-between align-items-center ">
            <input class="subOption1" type="checkbox" name="id_item[]" value="1" aria-label="..." data-harga="200"> chicken <span class="badge bg-primary rounded-pill">Rp. 200
                                                
                                            </span>
          </li>

          <li class="komp list-group-item d-flex justify-content-between align-items-center ">
            <input class="subOption1" type="checkbox" name="id_item[]" value="2" aria-label="..." data-harga="400"> chicken 2 <span class="badge bg-primary rounded-pill">Rp. 400
                                                
                                            </span>
          </li>

          <li class="komp list-group-item d-flex justify-content-between align-items-center ">
            <input class="subOption1" type="checkbox" name="id_item[]" value="3" aria-label="..." data-harga="300"> chicken 3 <span class="badge bg-primary rounded-pill">Rp. 300
                                                
                                            </span>
          </li>


        </ul>
      </div>
    </div>
  </div>




  <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 ">
    <div class="input-group">
      <span class="input-group-text">
                                 Total
                            </span>
      <input type="number" class="form-control" class="totallab" id="totallab">

    </div>


  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search