javascript - 添加来自不同字段的值并将它们相加

Question

我有一个问题，即一项服务有 4 个单选按钮，当用户选择任何单选按钮时，它的值会使用 javascript .change() 函数添加到total_sum 中。但问题是它不断增加虚假值(value)。就像您一次选择两个单选框一样。然后它添加错误值

jQuery("input:radio").change(function() {
  var total = parseInt(jQuery('#total_sum').val());
  var ischecked= jQuery(this).is(':checked');
  var unchecked = jQuery(this).is(':unchecked');
  var price = parseInt(jQuery(this).val());
  var newprice = total;
  var sum = 0;
  if(ischecked){
    sum = total + Number(price);
    jQuery('#total_sum').val(sum);
  }
  else if(unchecked){}
});
var total = parseInt(jQuery('#total_sum').val());
jQuery('#sqfootage').bind('change', function () {
  var sqfootage = jQuery('#sqfootage').val();
  var sqfootage_val = 0;
  var sum = 0;
  if(sqfootage >= 1 && sqfootage <= 1500)
  { 
    sqfootage_val = 10;
  }
  else if(sqfootage >= 1501 && sqfootage <= 1800)
  { 
    sqfootage_val = 15;
  }
  else if(sqfootage >= 1801 && sqfootage <= 2100)
  { 
    sqfootage_val = 20;
  }
  else if(sqfootage >= 2101 && sqfootage <= 2400)
  { 
    sqfootage_val = 25;
  }
  else if(sqfootage >= 2401 && sqfootage <= 2700)
  { 
    sqfootage_val = 30;
  }
  else if(sqfootage >= 2701 && sqfootage <= 3000)
  { 
    sqfootage_val = 35;
  }
  else if(sqfootage >= 3001 && sqfootage <= 3300)
  { 
    sqfootage_val = 40;
  }
  else if(sqfootage > 3300)
  { 
    sqfootage_val = 40;
  }
  sum = total + Number(sqfootage_val);
  jQuery('#total_sum').val(sum);         
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quest fl">
  <legend>What is the total square footage?</legend>

  <div class="one_col">
    <input name="sqfootage" id="sqfootage" min="1"  type="number" value="" placeholder="SqFootage:">
  </div>
</div> 
<div class="quest fl">
  <legend>Services</legend>
  <div class="one_col">
    <label><input name="service1" value="10" vt="Standard (one time)" type="radio" i="0">1</label>
  </div>
  <div class="one_col">
    <label><input name="service2" value="20" vt="Standard (one time)" type="radio" i="0">2</label>
  </div>
  <div class="one_col">
    <label><input name="service3" value="25" vt="Standard (one time)" type="radio" i="0">3</label>
  </div>
  <div class="one_col">
    <label><input name="service4" value="30" vt="Standard (one time)" type="radio" i="0">4</label>
  </div>
</div>

<input id="total_sum" name="total_sum" class="medium" type="text" value="89">

Answer 1

您的代码有错误。 jQuery 不包含 :unchecked 选择器。相反，您需要反转 :checked 选择器。所以改变一下

var unchecked = jQuery(this).is(':unchecked');

to var unchecked = jQuery(this).not(':checked');

解决问题。但不确定为什么你使用单选而不是复选框。