jQuery - 値にチェックボックスの値を掛けて計算する

Question

初期値（10としましょう）とA、B、C、Dの値の積である値を計算する必要があります。 2,3,4,5としましょう。

因子の組み合わせは、対応するボックスをチェックしてユーザーが選択する必要があります。問題は、これをフォーム内で独立して何度も繰り返す必要があり、以下の2つのソリューションではこのプロセスを正しく分離できないということです。これらがテキスト値だった場合、私はそうするでしょう。 var $text = $(".result", $section);

基本的に、これらのセクションに数値変数を関連付ける方法はわかりません。また、ボックスのどれもチェックされていなくてもResultフィールドにこの初期値（10）を持つことは素晴らしいことです。

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function(event) { 
 
     var $section = $(this).closest(".section"); 
 
     var total = 10; 
 
     $(".factor-checkbox:checked").each(function() { 
 
      total *= parseInt($(this).val()); 
 
     }); 
 
     
 
      $('.result').val(total); 
 
     
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" class="result"></label> 
 
    
 
</div> 
 

 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" class="result"></label> 
 
    
 
</div>

Answer 1

私はあなたが行が独立することにしたいと仮定します。

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function(event) { 
 
     var $section = $(this).closest(".section"), 
 
      initial = parseInt($section.find('.result').data('initial')), 
 
      total = initial; 
 
     $section.find("input:checked").each(function() { 
 
      total *= parseInt($(this).val()); 
 
     }); 
 
     $section.find('.result').val(total === initial ? initial : total); 
 
     
 
    }); 
 
    // getting the total values 
 
    $(".res_button").click(function() { 
 
     var $section = $(this).closest(".section"); 
 
     var total = $section.find('.result').val(); 
 
     console.log(total); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" data-initial="10" value="10" class="result"></label> 
 
    
 
    <label><button class="res_button">Result 1 line</button></label> 
 
</div> 
 

 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" data-initial="20" value="20" class="result"></label> 
 

 
    <label><button class="res_button">Result 2 line</button></label> 
 
</div>

Answer 2

$(document).ready(function() {   
 
    $(".factor-checkbox").click(function() { 
 
     var $section= $(this).closest(".section") 
 
     var total = 10; 
 
     $section.find(".factor-checkbox:checked").each(function() { 
 
      total *= parseInt($(this).val()); 
 
     }); 
 
     $section.find(".result").val(total); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" value="10" class="result"></label> 
 
    
 
</div> 
 

 
<div class="section"> 
 
    <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label> 
 
    <label><input type="checkbox" name="B" value="3" class="factor-checkbox">B</label> 
 
    <label><input type="checkbox" name="C" value="4" class="factor-checkbox">C</label> 
 
    <label><input type="checkbox" name="D" value="5" class="factor-checkbox">D</label> 
 

 
    <label>Result <input type="text" value="10" class="result"></label> 
 
    
 
</div>