javascript - jQuery 求和单选按钮值和文本输入值？

Question

正如您在代码片段中看到的，如果我选择单选按钮“标准”并提交..“总计”值为“标准+标准”，即“400”..我只想实现一个简单的输出，例如，如果我选择“标准”并提交，输出值应该仅为 200。如果我选​​择“自定义”，那么我的总值应该是“200 + 我在文本字段中给出的值”。如何实现这一目标？

$(document).ready(function(){
  $("div.radio-checked").hide();
    $("input[id$='custom']").click(function() {
        $("div.radio-checked").show();
        $( "#default" ).prop( "checked", false );
    });
    $("input[id$='default']").click(function() {
        $("div.radio-checked").hide();
        $( "#custom" ).prop( "checked", false );
    });
  $("div#pay-options").hide();
    $('#submit').click(function (){
      calculateSum();
      var formKeyValue=null;
       var string="";
       formKeyValue = $('#myForm').serializeArray();
       $(formKeyValue ).each(function(index, obj){
         if(obj.value!=''){
           string = string+"<p>"+obj.name+' : '+obj.value+"</p>";
           $("div#pay-options").show();
         };
      });
       $("#output").html("");
       $("#output").html(string);
    });
});

function calculateSum() {

  var sum = 0;
  $(".price").each(function() {

    if(!isNaN(this.value) && this.value.length!=0) {
      sum += parseFloat(this.value);
    }

  });
  $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
  <fieldset>
    <label for="name">Name?</label>
  <input type="text" id="name" name="Name" required>
    </fieldset>
<fieldset>
  <div>
    <input type="radio" value="200" id="default" class="price" required></input>
  <label for="default">Standard</label>
  </div>
  <input type="radio" value="200" id="custom" class="price" required></input>
<label for="custom">Custom</label>
<div class="radio-checked">
  <label for="product-cost">Approximate Cost of the product?</label>
  <input type="number" id="product-cost" name="Product Cost" class="price" data-require-pair="#custom" required>
</div>

</fieldset>

<fieldset>
  <button name="submit" type="submit" id="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>

<div id="output">

</div>
<div id="pay-options">
  <p>
    Total: <span id="sum"></span>
  </p>
</div>

Answer 1

首先，你的标记不正确。 所有单选按钮应该有一个共同的名称，具有相同名称的单选按钮属于同一组。

要实现您所解释的功能，您可以执行类似以下代码片段的操作

$(document).ready(function(){
  $("div.radio-checked").hide();
    $("input[id$='custom']").click(function() {
        $("div.radio-checked").show();
        $( "#default" ).prop( "checked", false );
    });
    $("input[id$='default']").click(function() {
        $("div.radio-checked").hide();
        $( "#custom" ).prop( "checked", false );
    });
  $("div#pay-options").hide();
    $('#submit').click(function (){
      calculateSum();
      var formKeyValue=null;
       var string="";
       formKeyValue = $('#myForm').serializeArray();
       $(formKeyValue ).each(function(index, obj){
         if(obj.value!=''){
           string = string+"<p>"+obj.name+' : '+obj.value+"</p>";
           $("div#pay-options").show();
         };
      });
       $("#output").html("");
       $("#output").html(string);
    });
});

function calculateSum() {
    var sum = 0;
 var selectedVal=$('input:radio[name=pricing]:checked').val();
  alert(selectedVal)
 if(selectedVal==="Standard"){
   sum=200;
 }
 
  else if(selectedVal==="Custom"){
    
  var $prdCost=$("#product-cost");
  var prdPrice=$prdCost.val();
    sum=200+parseFloat(prdPrice);
  }
  alert(sum);
  $("#sum").html(sum.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="" method="post">
  
  <fieldset>
    <label for="name">Name?</label>
  <input type="text" id="name" name="Name" required>
    
   </fieldset>

  <fieldset>
  <div>
    <input type="radio" value="Standard" id="default" name="pricing"   class="price" required>Standard</input>
  </div>
  <div>    
  <input type="radio" value="Custom" id="custom" name="pricing" value="custom" class="price" required>Custom</input>
  </div>


<div class="radio-checked">

  <label for="product-cost">Approximate Cost of the product?</label>
  <input type="number" id="product-cost" name="Product Cost" class="price" data-require-pair="#custom" required>
</div>

</fieldset>

<fieldset>
  <button name="submit" type="submit" id="submit" data-submit="...Sending">Submit</button>
</fieldset>
</form>

<div id="output">

</div>
<div id="pay-options">
  <p>
    Total: <span id="sum"></span>
  </p>
</div>

希望这有帮助