How to find a total sum of radio button values using jQuery/JavaScript?

Question

I have found following tutorial and applied it to my code How to sum radio button values using either Javascript or jQuery? but it didn't work for me. A user has a choice of a plan and upon his/her wish can download a personalized logo for $49.99. I wanted the price for a logo either $49.99 if yes, or $0.00 if no, to add to the choice of a plan, and have an output of a total price. However, the code in the previous tutorial that I have posted link to had worked, but what am I doing wrong in my code?

Fiddle http://jsfiddle.net/1s4gzbys/4/

<div class="control-group questions">
   <div class="field-control">
     <p>Would you like to download your company logo?</p>
        <div class="input-wrapper">
            <div class="answer"><input class="btn-checkbox-choice" type="radio" name="groupeight" value="$49.99"/><label>Yes</label></div>
<input class="btn-checkbox-choice" type="radio" name="groupeight" value="$0.00" /><label>No</label>
           </div>
       </div>
 </div>
 <span id="checkout-title">Checkout</span>
    <div class="plan-wrapper">
      <label id="silver-plan"><input class="btn-checkbox-plan"  type="radio" name="groupnine" value="$699"  /><label>Silver Plan</label><span id="silver-plan-price">$699</span>   </label>
      <label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="$999" /><label>Gold Plan</label><span id="gold-plan-price">$999</span></label>                
    </div>
    <div class="logo-wrapper">
      <span id="personalized-logo">Personalized Logo</span>
        <output type="number" name="price" id="output-choice">
    </div>
    <div class="total-wrapper">
        <div class="wrapper-b">
            <span id="total">Total</span>
                <output type="number" name="price" id="output"></output>
        </div>
    </div>

.js

 $(document).ready(function(){

 $('input').iCheck({
   checkboxClass: 'icheckbox_square-blue',
   radioClass: 'iradio_square-blue',
   increaseArea: '20%' // optional
});

  // $('input').on('ifChecked', function(event){});
       function calcprice() {
        var sum = 0;
    if(($(".btn-checkbox-choice").is(':checked')) && ($(".btn-checkbox-  plan").is(':checked'))).each(function(){
        sum += parseInt($(this).val(),10);
     });
      $("output[name=price]").val(sum);
     }
     $().ready(function(){
     $("#output").change(function(){
    calcprice()
    });

    });
 });

Post the code you are currently using to get the sum (and only that). — techfoobar
– techfoobar, Commented Dec 14, 2014 at 16:28

SaidbakR · Accepted Answer · 2014-12-15 01:13:17Z

0

Your are able to do the following:

$(document).ready(function(){
     $("input[type=radio]").change(function(){
         if ($("input[name=groupnine]:checked").val() && $("input[name=groupeight]:checked").val()){
             p1 = $("input[name=groupnine]:checked").val().substring(1)*1;
             p2 = $("input[name=groupeight]:checked").val().substring(1)*1;
             $("#output").val("$"+(p1+p2));
         }
         else{
             //alert('no')
         }
      // alert($(this).val());
     })
});

Check this DEMO: http://jsfiddle.net/1s4gzbys/15/

edited Dec 15, 2014 at 1:13

answered Dec 14, 2014 at 17:19

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

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

Collectives™ on Stack Overflow

How to find a total sum of radio button values using jQuery/JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related