關於輸入更改和複選框更改的運行功能

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... 
     // 
    } 
});