组合框更改时如何减去复选框值

Question

我的代码有问题。如何在组合框更改时减去复选框值。我希望这里的任何人都可以帮助我。

这是我的js代码：

//javascript for adding checkbox value and display in text.
    <script>
    $(document).ready(function(){
        $('input[type=checkbox]').click(function(e){
            $('#txtInput').val($(this).val())
            var total = 0;
            var text;
            $("input[type=checkbox]:checked").each(function(i,ch) {
                total += parseFloat($(this).val());
            });
            $("#txtInput").val(total);
        }); 
    });   
</script>

//javascript for substract checkbox value when combobox change
<script>
$(document).ready(function(){
    $('.xyz').change(function(){
        var tmp = $(this).closest('tr').find("input[type='checkbox']").attr('id');
     var substract = 0;
            $('#'+tmp+'').prop("checked",false)+(substract -= parseFloat($('#'+tmp+'').val())); 
        $("#txtInput").val(substract);
    });
});

这是我的 HTML 代码：

<table>
   <tr>
      <th>SELECTION</th>
      <th>ACTION</th>
      <th>FOOD NAME</th>
   </tr>
   <tr>
      <td><select class="xyz" name="xyz1" id="xyz1"><option >Cancel</option>
      <option>Take</option></select></td>
      <td><input type="checkbox" name="check1" id="check1" value="1" /></td>
      <td>French Fries</td>
   </tr>
   <tr>
      <td><select class="xyz" name="xyz2" id="xyz2"><option >Cancel</option>
      <option>Take</option></select></td>
      <td><input type="checkbox" name="check2" id="check2" value="3" /></td>
      <td>Pizza</td>
   </tr>
   <tr>
      <td><select class="xyz" name="xyz3" id="xyz3"><option >Cancel</option>
      <option>Take</option></select></td>
      <td><input type="checkbox" name="check3" id="check3" value="5" /></td>
      <td>Beef Burger</td>
   </tr>
</table>
     <input type="text" name="txtInput" id="txtInput" />

首先，如果我 select "Take" 在组合框中单击复选框，该值将显示为文本。其次，如果我再次这样做，复选框将添加值并将结果显示为文本。第三，这是我的问题。如果我将组合框更改为 "Cancel" 复选框只会取消选中但不能减少值。我想如果我将组合框更改为 "Cancel" 值会根据复选框 selection 值和复选框取消选中而减少。对于任何帮助，我真的很感激。谢谢

Answer 1

Make a common function which will read the state of the input elements and do the calculations accordingly.

.parents(selector)会向上遍历，返回匹配的元素。

试试这个：

var doCalc = function() {
  var total = 0;
  var text;
  $("input[type=checkbox]:checked").each(function(i, ch) {
    if ($(this).parents('tr').find('select option:selected').text() == 'Take') {
      total += parseFloat($(this).val());
    }
  });
  $("#txtInput").val(total);
}

$('input[type=checkbox]').change(doCalc);
$('.xyz').change(function() {
  if ($(this).find('option:selected').text() == 'Cancel') {
    $(this).parents('tr').find('input[type="checkbox"]').prop('checked', false);
  }
  doCalc();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>SELECTION</th>
    <th>ACTION</th>
    <th>FOOD NAME</th>
  </tr>
  <tr>
    <td>
      <select class="xyz" name="xyz1" id="xyz1">
        <option>Cancel</option>
        <option>Take</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="check1" id="check1" value="1" />
    </td>
    <td>French Fries</td>
  </tr>
  <tr>
    <td>
      <select class="xyz" name="xyz2" id="xyz2">
        <option>Cancel</option>
        <option>Take</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="check2" id="check2" value="3" />
    </td>
    <td>Pizza</td>
  </tr>
  <tr>
    <td>
      <select class="xyz" name="xyz3" id="xyz3">
        <option>Cancel</option>
        <option>Take</option>
      </select>
    </td>
    <td>
      <input type="checkbox" name="check3" id="check3" value="5" />
    </td>
    <td>Beef Burger</td>
  </tr>
</table>
<input type="text" name="txtInput" id="txtInput" />

Fiddle here

组合框更改时如何减去复选框值

How to substract checkbox value when combobox change

javascript

text

combobox

add