仅添加其相应复选框处于选中状态的文本框值

Question

<input type="checkbox" id="checkbox1" />  
<input id="reg12" type="text" name="add-1" class="form-control" value="22" readonly ><br>
<input type="checkbox" id="checkbox2" /> 
<input id="reg13" type="text" name="add-2" class="form-control" value="22" readonly ><br>
<input type="checkbox" id="checkbox3" /> 
<input id="reg14" type="text" name="add-2" class="form-control" value="22" readonly >  

我有三个文本框和各自的复选框。我只想添加那些选中了相应复选框的文本框值。

jQuery(document).ready(function($) {
    var sum = 0;
    $('#checkbox1').click(function() {
       sum = 0;
       var val1= parseInt($("#add-1").val()); 
       var val2= parseInt($("#add-2").val()); 
       sum=parseInt(val1+val2);
       $('#sum').html(sum);
    });
});

Answer 1

您可以遍历选中的复选框，获取下一个输入的值并将其添加到总和中。

​

jQuery(document).ready(function($) {
  var sum = 0;
  $('input[type=checkbox]').click(function() {
    sum = 0;
    $('input[type=checkbox]:checked').each(function(){
      var val=parseInt($(this).next().val());
      sum+=val;
    });
    $('#sum').val(sum);
  });
});

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

<input type="checkbox" id="checkbox1" />
<input id="reg11" type="text" name="add-1" class="form-control" value="22" readonly>
<br>
<input type="checkbox" id="checkbox2" />
<input id="reg12" type="text" name="add-2" class="form-control" value="20" readonly>
<br>
<input type="checkbox" id="checkbox3" />
<input id="reg13" type="text" name="add-3" class="form-control" value="15" readonly>
<br>
<input id='sum' type='text' readonly />

​