組合框更改時如何減去復選框值

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

首先，如果我在組合框中選擇“ Take”，然后單擊復選框，則該值將顯示為文本。 其次，如果再次執行此復選框，則將添加值並將結果顯示為文本。 第三，這是我的問題。 如果我將組合框更改為“取消”，則僅取消選中該復選框，但不能減小該值。 我想將組合框更改為“取消”，然后根據復選框選擇值和取消選中復選框來減少值。 對於任何幫助，我都非常感謝。 謝謝。

Answer 1

創建一個通用函數，該函數將讀取輸入元素的狀態並進行相應的計算。

.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" /> 

在這里擺弄