現(xiàn)在我正在使用 JQuery 和 PHP 代碼計算復(fù)選框值。該機(jī)制是，當(dāng)用戶選中復(fù)選框時，它將對價格進(jìn)行求和。我實現(xiàn)了 JQuery 的公式，但結(jié)果不正確。這是我的代碼查詢<script>$(function() { $('.dealprice').on('input', function(){ const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val(); var eachPrice = 0; $('.dealprice:checkbox:checked').each(function(){ eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice); }); $("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')); }); }); </script>了解更多詳情。我在這個網(wǎng)站上制作了一個示例 https://repl.it/@ferdinandgush/Sum-Calculate-checkbox只需單擊“運(yùn)行”按鈕，您就可以測試它。我需要按照該表格格式顯示正確的計算請幫忙。
2 回答
鳳凰求蠱
TA貢獻(xiàn)1825條經(jīng)驗 獲得超4個贊
您只需在循環(huán)內(nèi)定義 getItemPrice 即可，否則您只需為單擊的項目計算一次，而不是為每個項目執(zhí)行一次。
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
<table class="tg">
<thead>
<tr>
<th class="tg-qh0q">Item</th>
<th class="tg-qh0q">Price</th>
<th class="tg-qh0q">Deal</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-0lax">Book</td>
<td class="tg-0lax">$ 10 <input type="hidden" name="itemprice" value="10"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][0]"></td>
</tr>
<tr>
<td class="tg-0lax">Pencil</td>
<td class="tg-0lax">$ 5 <input type="hidden" name="itemprice" value="5"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][1]"></td>
</tr>
<tr>
<td class="tg-0lax">Pen</td>
<td class="tg-0lax">$ 8 <input type="hidden" name="itemprice" value="8"></td>
<td class="tg-0lax"><input type="checkbox" class="dealprice" name="deal[12][2]"></td>
</tr>
<tr>
<td class="tg-amwm" colspan="2">Total</td>
<td class="tg-0lax"><span id="totalDeal">0</span></td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗 獲得超9個贊
您必須將getItemPrice其放入檢查的函數(shù)內(nèi)部。請檢查以下代碼：
$(function() {
$('.dealprice').on('input', function(){
var eachPrice = 0;
$('.dealprice:checkbox:checked').each(function(){
const getItemPrice = $(this).closest("tr").find('input[name=itemprice]').val();
eachPrice += isNaN(parseInt(getItemPrice)) ? 0 : parseInt(getItemPrice);
});
$("#totalDeal").text(eachPrice.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'));
});
});
另請檢查此 repl https://repl.it/repls/LavenderAgonizingRoot
- 2 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消