JavaScriptを使ってチェックボックスの数を計算する方法

Question

この数値を計算するにはどうすればいいですか？最初の列の結果が1つのフィールド（counter-one）と2番目の列（300 + 800）他の（カウンター2）。結果

<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; 
 
     }) + ' ' 
 
\t \t); 
 
});

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