How to sum value of radio button and checkbox in 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.

I'm not an php expert but what do you have in your radio buttons value property? Integers? — Hauns TM
– Hauns TM, Commented Mar 3, 2016 at 13:25
The code in your question doesn't work because it contains PHP scripts. Could you strip it to minimum working example? — martin
– martin, Commented Mar 3, 2016 at 13:28
yes. it's a user inputted text in the front end. it serves as the price for the item — KevinG
– KevinG, Commented Mar 3, 2016 at 13:28
What do you need the hidden inputs for? Please move the value of the "rad1" input to the "rad1" radio — Fabian Horlacher
– Fabian Horlacher, Commented Mar 3, 2016 at 13:38

Fabian Horlacher · Accepted Answer · 2016-03-03 13:49:54Z

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>

edited Mar 3, 2016 at 13:49

answered Mar 3, 2016 at 13:44

Fabian Horlacher

1,9101 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KevinG Over a year ago

thank you for the response guys! got the code up and ready already!

Pavan Teja · Accepted Answer · 2016-03-03 13:51:48Z

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>

Collectives™ on Stack Overflow

How to sum value of radio button and checkbox in jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related