現在我正在使用 JQuery 和 PHP 代碼計算復選框值。該機制是，當用戶選中復選框時，它將對價格進行求和。我實現了 JQuery 的公式，但結果不正確。這是我的代碼查詢<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>了解更多詳情。我在這個網站上制作了一個示例 https://repl.it/@ferdinandgush/Sum-Calculate-checkbox只需單擊“運行”按鈕，您就可以測試它。我需要按照該表格格式顯示正確的計算請幫忙。
2 回答
鳳凰求蠱
TA貢獻1825條經驗 獲得超4個贊
您只需在循環內定義 getItemPrice 即可，否則您只需為單擊的項目計算一次，而不是為每個項目執行一次。
$(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>
函數式編程
TA貢獻1807條經驗 獲得超9個贊
您必須將getItemPrice其放入檢查的函數內部。請檢查以下代碼：
$(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 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消