如何使用jQuery/JavaScript查找单选按钮值的总和? [英] How to find a total sum of radio button values using jQuery/JavaScript?

问题描述

我找到了以下教程，并将其应用于了我的代码

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?

小提琴 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()
    });

    });
 });

推荐答案

您可以执行以下操作:

$(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());
     })
});

检查此演示: http://jsfiddle.net/1s4gzbys/15/

这篇关于如何使用jQuery/JavaScript查找单选按钮值的总和?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！