如何使用javascript（jquery）计算已选中复选框的数量

Question

如何计算这个数字，我需要第一列的结果在一个字段（counter-one）中添加（400 + 700）而在另一个字段中添加第二列（300 + 800）（counter-two）。结果

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

Answer 2

• 选择选中的输入
• 获取与所选输入相关的费用数字
• 获取部分费用数据

$("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>