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>