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

首先，如果我选择＆＃34; Take＆＃34;在组合框中并单击复选框，该值将显示在文本中。其次，如果我再次执行此操作，则复选框将添加值并将结果显示在文本中。第三，这是我的问题。如果我将组合框更改为＆＃34;取消＆＃34;该复选框仅取消选中但无法降低该值。如果我将组合框更改为＆＃34;取消＆＃34;我想要根据复选框选择值减少值，并取消选中复选框。对于任何帮助，我真的很感激。感谢。

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

Fiddle here

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

1 个答案: