現(xiàn)在我正在使用 JQuery 和 PHP 代碼計(jì)算復(fù)選框值。該機(jī)制是，當(dāng)用戶選中復(fù)選框時(shí)，它將對(duì)價(jià)格進(jìn)行求和。我實(shí)現(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>了解更多詳情。我在這個(gè)網(wǎng)站上制作了一個(gè)示例 https://repl.it/@ferdinandgush/Sum-Calculate-checkbox只需單擊“運(yùn)行”按鈕，您就可以測(cè)試它。我需要按照該表格格式顯示正確的計(jì)算請(qǐng)幫忙。
2 回答
鳳凰求蠱
TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊
您只需在循環(huán)內(nèi)定義 getItemPrice 即可，否則您只需為單擊的項(xiàng)目計(jì)算一次，而不是為每個(gè)項(xiàng)目執(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)驗(yàn) 獲得超9個(gè)贊
您必須將getItemPrice其放入檢查的函數(shù)內(nèi)部。請(qǐng)檢查以下代碼：
$(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, '$&,'));
});
});
另請(qǐng)檢查此 repl https://repl.it/repls/LavenderAgonizingRoot
- 2 回答
- 0 關(guān)注
- 183 瀏覽
添加回答
舉報(bào)
0/150
提交
取消