使用jQuery收集和總的不同響應

我試圖有一個表格，讓您以數字開頭，慢慢地在文本框中填寫或檢查的關閉刪除的東西值使用jQuery收集和總的不同響應

我已經看到了這一點 - http://jsfiddle.net/ZZX5D/只要它們都是文本框就可以工作。

$(function(){   
    $('input').each(function() { 
     $(this).keyup(function(){ 
      calculateTotal($(this)); 
     }); 
    }); 
}); 

function calculateTotal(src) { 
    var sum = 0; 
    var sumtable = src.closest('.sumtable'); 

    sumtable.find('input').each(function() { 
     if(!isNaN(this.value) && this.value.length!=0) { 
      sum += parseFloat(this.value); 
     } 
    }); 

    sumtable.find(".total").html(sum.toFixed(2)); 

    var bal = parseInt($('input[name="baseAmount"]').val()); 
    var earnedAmt = parseInt($('input[name="earnedAmount"]').val()); 
    bal = bal + earnedAmt - sum; 
    sumtable.find(".balance").html(bal.toFixed(2)); 
}

我想要做的是有事情列表以及與它們相關的值來選擇沿，並使用複選框來包括或運行總計排除。

起始量100.00 雞蛋2 肉3 牛奶剩餘100.00

所以如果我打旁邊的複選框，以雞蛋和肉類，總剩餘變爲95.00 5 總。我想爲每個產品分配值，但除非用戶選中該框，否則不要將其包含在總數中。他們取消選中它並將其從總數中刪除。

我假設我需要改變函數的頂部部分，它將所有的東西都相減，但我不確定如何繼續。

來源

2013-06-21 Matt Cushing

在'sumtable.find（）'位中，檢查'input'是否爲'checkbox'，然後檢查'checked'。如果是，則添加它，如果不是，則忽略它。 –

還沒完全遵循完整的問題，但我會注意到你可以縮短「$（'input'）。each（fn（）{this.keyup（...」to「$（'input' ）.keyup（...」。jQuery是主要基於直接的對象集合操作，而不是通過循環他們每個人進行這些操作的想法。但是，你肯定應該是KEYUP，而不是..的onchange ？ – Katana314

那麼有你到目前爲止已經試過嗎？你有你的HTML佈局嗎？ –

有很多方法可以解決這個問題。這是你想要的那種東西嗎？

HTML：

<div>Starting amount: <span id="starting">100</span></div> 
<div> <span>eggs:</span> <span class="amt">2</span> 
    <input type="checkbox" /> 
</div> 
<div> <span>meat:</span> <span class="amt">3</span> 
    <input type="checkbox" /> 
</div> <span>milk:</span> <span class="amt">5</span> 
    <input type="checkbox" /> 
</div> 
<div>Amount Remaining: <span id="remaining"></span></div>

然後這在您的文檔準備功能：

var starting = +$("#starting").text(); 
$("#remaining").text(starting); 

$("input[type=checkbox]").click(function() { 
    calculateTotal(); 
}); 

function calculateTotal() { 
    var curr = starting; 
    var checked = $("input:checked").each(function (item) { 
     curr -= +($(this).prev(".amt").text()); 
    }); 
    $("#remaining").text(curr); 
}

工作fiddle。

您可能會考慮添加很多潛在的改進。但個人而言，我寧願使用良好的模板或綁定框架，而不是像這樣直接操作DOM。

來源

2013-06-21 18:01:45

我對任何事情都很開放。我只是在爲一個朋友工作，上面的解決方案是我遇到的第一件事。這真是令人討厭，但我工作的實際項目是一個字符發生器龍與地下城:)有一定數量的構建點開始，花一些武器，技能，和功勳。我的兒子和他的朋友們玩耍，我想給他們一些有助於追蹤這一切的東西。 –

我想用這個做幾種不同的操作，我擔心我會花很多時間走下一條路，纔會發現我受到嚴重限制。想知道這是否可能更容易由數據庫和PHP驅動。 –

我一直在努力研究其中的一些，它已經開始工作，但我被卡住了。 http://jsfiddle.net/mattcushing/K5szE/2/我試圖改變其中一個複選框的值，如果選擇了頂部的一組。它甚至沒有達到計算它的功能。 –

使用jQuery收集和總的不同響應

回答

相關問題