javascript - 如何使用javascript(jquery)计算选中复选框的数量

Question

我如何计算这个数字，我需要第一列的结果在一个字段(计数器一)中添加(400 + 700)，在其他字段(计数器二)中添加第二列(300 + 800)。结果

<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>

Answer 1

类似的东西

$('.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;
        }) + ' '
		);
});

<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>