Javascript - 從數組計算復選框的總和

Question

根據以下答案，我編輯了這篇文章以提供更多細節。 感謝大家。

編輯：

這是我的代碼：

@foreach($amount_data as $amount)                          
<div class="col-sm-12">                             
<div class="input-checkbox">                               
<div class="inner"></div>
<input type="checkbox" name="items[]" value="{{$amount->amount}}" onchange="checkTotal()" />
</div>
<span>{{$amount->item_name}} - <b>{{$amount->amount}} {{$form->currency}}</b></span>
 </div>
 @endforeach
 <br/>  Total: <input type="text" size="2" name="total" value="0" />
 @endif

使用Javascript：

<script type="text/javascript">

function checkTotal() {
var sum = 0,
frm = document.getElementById("payment-form"),
cbs = frm["items[]"],
i;
for (i = 0; i < cbs.length; i++) {
if (cbs[i].checked) {
sum += parseInt(cbs[i].value);
}
}
frm.total.value = sum;
}

</script>

表格信息：

 <form action="{{url('secure-checkout/'.$form->unique_url_code)}}" method="POST" id="payment-form" name="payment-form">

似乎沒有用。 控制台沒有錯誤。 哪里不對了？

Answer 1

由於名稱中包含[]，您需要使用括號表示法

document.listForm["items[]"][i].checked

 function checkTotal() { var sum = 0, frm = document.getElementById("payment-form"), cbs = frm["items[]"], i; for (i = 0; i < cbs.length; i++) { if (cbs[i].checked) { sum += parseInt(cbs[i].value); } } frm.total.value = sum; } 

 <form name="payment-form" id="payment-form"> <input type="checkbox" name="items[]" value="2" onchange="checkTotal()" />2<br/> <input type="checkbox" name="items[]" value="5" onchange="checkTotal()" />5<br/> <input type="checkbox" name="items[]" value="10" onchange="checkTotal()" />10<br/> <input type="checkbox" name="items[]" value="20" onchange="checkTotal()" />20<br/> Total: <input type="text" size="2" name="total" value="0" /> </form> 

Answer 2

您只需使用Array.prototype.reduce（）即可獲得已選中復選框數組：

 function checkTotal() { document.listForm.total.value = Array.prototype.reduce.call( document.listForm.choice, function (sum, el) { return el.checked ? sum + +el.value : sum; }, 0 ); } 

 <form name="listForm"> <input type="checkbox" name="choice" value="2" onchange="checkTotal()"/>2<br/> <input type="checkbox" name="choice" value="5" onchange="checkTotal()"/>5<br/> <input type="checkbox" name="choice" value="10" onchange="checkTotal()"/>10<br/> <input type="checkbox" name="choice" value="20" onchange="checkTotal()"/>20<br/> Total: <input type="text" size="2" name="total" value="0"/> </form> 

Answer 3

這是使用jQuery的答案。 希望這個對你有幫助！ 我已將聽眾和函數分開，因為我相信它會使以后的編輯更容易。 您可以將它們組合起來以縮短代碼。

 //Listener for the checkbox $("input[name='choice']").change(function() { sumUp(); }); //Funtion that adds the total up function sumUp() { var sum = 0; $(" input[name='choice']:checked").each(function() { sum += parseInt($(this).val()); }); $("input[name=total]").val(sum); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="listForm"> <input type="checkbox" name="choice" value="2" />2 <br/> <input type="checkbox" name="choice" value="5" />5 <br/> <input type="checkbox" name="choice" value="10" />10 <br/> <input type="checkbox" name="choice" value="20" />20 <br/> Total: <input type="text" size="2" name="total" value="0" /> </form>