关于输入更改和复选框更改的运行功能

Question

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

UPDATE我创建了一个FIDDLE 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

更新：

如果在某些形式的，你没有一个复选框（换句话说，有些价格是不可选的），所以你必须检查复选框是否存在，如果存在，请检查是否选中。
为了做到这一点，修改这样的更新功能：

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

u能做到

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

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

http://jsfiddle.net/1r7rk21w/

Answer 3

试试这个：不是ATTR使用的道具

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

Answer 4

如果您希望基于检查的属性值更新，那么你的SUM函数需要实际使用复选框吧？

JS：

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