如何在jQuery中对单选按钮和复选框的值求和

Question

I have a code already working which calculates the sum of the radio buttons. I changed my mind in one of the radio button group and decided to make it a checkbox. When I tick items on the checkbox, the sum returns NaN . What would I add/change in my jquery in order for it to recognize the checkbox value?

Here's my code:

JQuery

  < script type = "text/javascript" > function calcscore() { $(".calc:checked").each(function() { score += parseInt($(this).val(), 10); }); $('#price').text(score.toFixed(2)); $("input[name=sum]").val(score) } $().ready(function() { $(".calc").change(function() { calcscore() }); }); < /script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <li> <label> <input class="calc" type="radio" name="rad1" id="rad1" /> </label> <input type="hidden" name="rad1" value="100"> </li> <li> <label> <input class="calc" type="checkbox" name="check1" id="check1" value="200" /> </label> <input type="hidden" name="check1" value="200"> </li> <p>Total: PHP <span id="price">0</span> </p> 

Appreciate all the help.

Answer 1

This code code should answer your question:

 function calcscore() { score = 0; $(".calc:checked").each(function () { score += Number($(this).val()); }); $("#price").text(score.toFixed(2)); $("#sum").val(score) } $().ready(function () { $(".calc").change(function () { calcscore() }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <li> <label> <input class="calc" type="radio" name="rad1" id="rad1" value="100" /> </label> </li> <li> <label> <input class="calc" type="checkbox" name="check1" id="check1" value="200" /> </label> </li> <input type="hidden" name="sum" id="sum" value="0"> <p>Total: PHP <span id="price">0</span> </p> 

Answer 2

for your markup and usecase as it stands now in the question.try this

 $('.calc').on('click', function() { var sum = 0; $('.calc:checked').each(function() { sum += Number($(this).parent().next().val()) }) $('#price').text(sum) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <li> <label> <input class="calc" type="radio" name="rad1" id="rad1" /> </label> <input type="hidden" name="rad1" value="100"> </li> <li> <label> <input class="calc" type="checkbox" name="check1" id="check1" value="200" /> </label> <input type="hidden" name="check1" value="200"> </li> <p>Total: PHP <span id="price">0</span> </p> 

try this,you dont need hidden fields for values.i removed them and used value property of checkbox.

 $('.calc').on('click', function() { var sum = 0; $('.calc:checked').each(function() { sum += Number($(this).val()) }) $('#price').text(sum) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <li> <label> <input class="calc" type="checkbox" name="check1" value="100" id="rad1" /> </label> </li> <li> <label> <input class="calc" type="checkbox" name="check1" value="200" id="check1" value="200" /> </label> </li> <p>Total: PHP <span id="price">0</span> </p>