在输入更改和复选框更改时运行功能

Question

我有一个包含多种表单的 Bootstrap 模式。所有表单都有一个输入字段和复选框。每次发生更改事件时，我都会尝试运行函数update_amounts_modal。这在我更改输入值时起作用，但在我选中/取消选中复选框时不起作用。

更新我已经创建了一个小提琴HERE

功能：

function update_amounts_modal(){
  var sum = 0.0;
  $('form').each(function() {
    var qty = $(this).find('.qty input').val();
    var price = $(this).find('.price input').val();
    qty= parseInt(qty) || 0;
    price= parseFloat(price) || 0;
    var amount = (qty*price)
                 sum+=amount;
  });
    $('.total-modal').text('€'+sum.toFixed(2));
}

变化函数：

  update_amounts_modal();
  $('form .qty').change(function(){
    update_amounts_modal();
    $('.total-modal').change();
  });

HTML：

<form method="post" data-target="#modal" data-async="" action="action_url">
  <div class="qty cell">
    <input type="text" class="qty" value="1" name="quantity">
  </div>
  <div class="price cell">
    <span class="euro">€</span><input type="text" disabled="" class="price" value="0.60">
  </div>
  <div class="checkbox cell">
     <input type="checkbox" checked="" value="12933006" name="product[]" class="idRow">
  </div>
</form>

//And more forms exactly like this but with different input values!

<div class="total-modal">€0.00</div>

实际需要发生的是，通过选中/取消选中需要使用函数重新计算值。因此，如果您将 qty 设置为 10 并且取消选中该复选框，则必须从总数中扣除该金额（10 倍，例如 €0.25）。

我认为这样的事情应该可行，但事实并非如此：

$(".idRow").change(function(){
  if($(this).attr("checked")){
    update_amounts_modal();
  }
  else{
    update_amounts_modal();
  }

我没有收到错误，只是没有发生任何事情。有没有更好的方法来实现这一点？

Answer 1

我不确定你的问题是否正确，但我认为你正在寻找这样的东西：

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var isChecked = $(this).find('.idRow').prop("checked");
        if (isChecked){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

$().ready(function () {
    update_amounts_modal();
    $('form .qty, form .idRow').change(function () {
        update_amounts_modal();
    });
});

Check JSFiddle Demo

更新：

如果在某些表单中您没有 CheckBox（换句话说，某些价格不是可选的），那么您必须检查 CheckBox 是否存在以及是否存在，因此请检查是否已选中。
为此，请像这样修改更新函数：

function update_amounts_modal() {
    var sum = 0.0;
    $('form').each(function () {
        var qty = $(this).find('.qty').val();
        var price = $(this).find('.price').val();
        var checkbox = $(this).find('.idRow');
        if (checkbox.prop("checked") || checkbox.length == 0){
            qty = parseInt(qty, 10) || 0;
            price = parseFloat(price) || 0;
            var amount = (qty * price);
            sum += amount;
        }
    });
    $('.total-modal').text('€' + sum.toFixed(2));
}

在这一行中：if (checkbox.prop("checked") || checkbox.length == 0){ 我们说如果复选框被选中 (checkbox.prop("checked")) 或没有复选框 (checkbox.length == 0) 则对值求和。

Check JSFiddle Demo

Answer 2

试试这个：而不是 attr 使用 prop

$(".idRow").change(function(){
   if($(this).prop("checked")){
    update_amounts_modal();
   }
   else{
       update_amounts_modal();
    }
});

Answer 3

你可以的

<div class="checkbox cell">
    <input type="checkbox"/>
</div>

jQuery("div.checkbox > input:checkbox").on('click',function(){
    alert('asdasd');
});

http://jsfiddle.net/1r7rk21w/

Answer 4

如果您希望根据选中的属性更新值，那么您的 sum 函数需要实际使用该复选框，对吗？

JS：

$('form').each(function () {
    if ($(this).find(".idRow").prop("checked") === true){
        //
        // The normal computations you had before...
        //
    } 
});