how to calculate numbers of checked checkbox using javascript(jquery)

Question

how can i calculate this numbers, i need that the result of first column adds (400 + 700) in one field(counter-one) and the second column (300 + 800) in other(counter-two). The result

<tr>
     <td><span class="cost">400</span>&nbsp;грн.</td>
     <td><span class="cost">300</span>&nbsp;грн./месяц</td>
     <td>
         <label class="switch">
             <input type="checkbox" id="cost-one">
             <div class="slider round"></div>
         </label>
     </td>
 </tr>
 <tr>
         <td><span class="cost">700</span>&nbsp;грн.</td>
         <td><span class="cost">800</span>&nbsp;грн./месяц</td>
         <td>
             <label class="switch">
                 <input type="checkbox" id="cost-two>
                 <div class="slider round"></div>
             </label>
         </td>
     </tr>

html:

<div class="counter-wrapper">
                                    <div class="install">
                                        <p class="counter-head">Стоимость с установкой</p>
                                        <p class="counter-one">0&nbsp;<span class="currency">грн.</span></p>
                                    </div>
                                    <div class="monitoring">
                                        <p class="counter-head">Стоимость мониторинга</p>
                                        <p class="counter-two">0&nbsp;<span class="currency">грн./месяц</span></p>
                                    </div>
                                </div>

It would help if the text want in Russian (?) so I can understand what's written. — Ozan
– Ozan, Commented Aug 7, 2016 at 16:48

adeneo · Accepted Answer · 2016-08-07 16:55:17Z

1

Something like

$('.switch input').on('change', function() {
    $('.counter-' + this.id.split('-').pop()).find('span').eq(0).html(
        $(this).closest('tr').find('.cost').map(function() {
            return +$(this).text();
        }).get().reduce(function(a,b) {
            return a + b;
        }) + '&nbsp;'
		);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td><span class="cost">400</span>&nbsp;грн.</td>
    <td><span class="cost">300</span>&nbsp;грн./месяц</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="cost-one">
        <div class="slider round"></div>
      </label>
    </td>
  </tr>
  <tr>
    <td><span class="cost">700</span>&nbsp;грн.</td>
    <td><span class="cost">800</span>&nbsp;грн./месяц</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="cost-two">
        <div class="slider round"></div>
      </label>
    </td>
  </tr>
</table>

<div class="counter-wrapper">
  <div class="install">
    <p class="counter-head">Стоимость с установкой</p>
    <p class="counter-one"><span>0&nbsp;</span><span class="currency">грн.</span></p>
  </div>
  <div class="monitoring">
    <p class="counter-head">Стоимость мониторинга</p>
    <p class="counter-two"><span>0&nbsp;</span><span class="currency">грн./месяц</span></p>
  </div>
</div>

edited Aug 7, 2016 at 16:55

answered Aug 7, 2016 at 16:44

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dmitriy Over a year ago

adeneo it works well, thanks a lot, but I need that if you check the first checkbox = the result in the first field will be 400 and the second column 300 and when you check the second column the result will be the first column 1100 (400+700) and the second 1100(300+800) can you show me please how to do this

adeneo Over a year ago

@DimaVleskov - that's a little confusing, it this what you're looking for -> FIDDLE

dmitriy Over a year ago

adeneo thanks a lot you really helped me, and it's great that you wrote comments and tried to explain how to do this

Ozan · Accepted Answer · 2016-08-07 17:07:10Z

Select the checked inputs
Get cost numbers related to selected inputs
Get the some of the cost numbers obtained

$("button").on("click", function() {
  var costs = $("input:checked").parents("tr").find(".cost"); //get .cost elements of the checked inputs
  
  var total =
        $.map(costs, function(i, v) { return parseInt($(i).text()); }) //get an array of cost numbers
          .reduce(function(preval, cval) { return preval + cval }, 0); //get the sum of cost numbers
  
  console.log(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Calculate</button>
<hr/>

<table>
  <tr>
    <td><span class="cost">400</span>&nbsp;грн.</td>
    <td><span class="cost">300</span>&nbsp;грн./месяц</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="cost-one" />
        <div class="slider round"></div>
      </label>
    </td>
  </tr>
  <tr>
    <td><span class="cost">700</span>&nbsp;грн.</td>
    <td><span class="cost">800</span>&nbsp;грн./месяц</td>
    <td>
      <label class="switch">
        <input type="checkbox" id="cost-two" />
        <div class="slider round"></div>
      </label>
    </td>
  </tr>
</table>


<div class="counter-wrapper ">
  <div class="install ">
    <p class="counter-head ">Стоимость с установкой</p>
    <p class="counter-one ">0&nbsp;<span class="currency ">грн.</span>
    </p>
  </div>
  <div class="monitoring ">
    <p class="counter-head ">Стоимость мониторинга</p>
    <p class="counter-two ">0&nbsp;<span class="currency ">грн./месяц</span>
    </p>
  </div>
</div>

Collectives™ on Stack Overflow

how to calculate numbers of checked checkbox using javascript(jquery)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related