JavaScript在一个输入文本中两个值的总和

Question

我正在寻找一种在输入文本中添加另一个值的方法。 我有一个只读输入框，两个单选按钮和三个复选框。

<div class="radios">
  <label>
  <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive
  </label>
  <label>
  <input type="radio" name="extratreats" data-target="#extratreat"> Extra-Treats
  </label>
</div>

<div id="extratreat" class="extratreat tab-pane collapse">
  <label><h2>Extra Treats</h2></label>
   <br />
  <label><input id="treats" name="treats[]" value="Sweet Corner" type="checkbox" > Sweet Corner & Choco Fountain</label>
  <label><input id="treats" name="treats[]" value="Popcorn Maker" type="checkbox" > Popcorn Maker</label>
  <label><input id="treats" name="treats[]" value="Hotdog Roller" type="checkbox" > Hotdog Roller</label>
</div>

<div id="pricing">
  <label><h2>Price</h2></label>
   <br />
  <input type="text" name="price-total" value="" autocomplete="off" readonly>
</div>

我在单选按钮中添加了一个javascript ，如果我单击非专有 ， 定价的值将更改为279 。 但是我不知道如果我从零食中添钱，怎么能增加更多的价值。 例如， Sweet Corner的价格是2500 ，他们还单击了默认值为279的非排他性 ，我如何将2500加到已经指定的279？

这是我尝试使用的脚本 ：

<script>
 $(document).ready(function(){
 $('[name=packages]').click(function()  {
    var val = $(this).val();
     if (val == "non-exclusive") {
       $('[name=price-total]').val('PHP 279');
     } else if (val == "package1") {
       $('[name=price-total]').val('PHP 300');
     } else if (val == "package2") {
        $('[name=price-total]').val('PHP 400');
     }
    });
 $('[id=treats').click(function()  {
      var val1 = $(this).val();
      var val = $('[name=price-total]').val();
 if (val1 == "Sweet Corner") {
       $('[name=price-total]').val(val.val+' 2500');
       } else if (val1 == "package1") {
       $('[name=price-total]').val('PHP 300');
       } else if (val1 == "package2") {
        $('[name=price-total]').val('PHP 400');
      }
    });
 });
</script>

如果我单击其中一个复选框，而不是将其值添加到第一个值，它将给我一个“未定义的值”。

Answer 1

问题是您创建了一个名为val的变量，然后尝试使用val.val + ' 2500'访问该变量，而该变量本来应该是val + ' 2500' 。 val.val表示存在具有val属性的val对象。 既然没有，您就undefined 。

您还存在语法错误：

$('[id=treats').click(function()  {

应为：

$('[id=treats]').click(function()  {

另外，我认为由于您正在测试，所以switch语句更合适。

最后，您有多个具有相同id项目，这是无效的。 在使它们全部唯一之后，您应该更改第二个单击处理程序，以便它使用name属性而不是id来访问所有复选框。

 $(document).ready(function(){ $('[name=packages]').click(function() { switch($(this).val()){ case "non-exclusive": $('[name=price-total]').val('PHP 279'); break; case "package1": $('[name=price-total]').val('PHP 300'); break; case "package2": $('[name=price-total]').val('PHP 400'); break; } }); $('[name="treats[]"]').click(function() { // Strip out non-numeric portion: var val = $('[name="price-total"]').val().replace("PHP ", ""); switch($(this).val()){ case "Sweet Corner": // Check to see if checkbox is checked... if(this.checked){ // Must convert the value to a number and then you can do math $('[name=price-total]').val("PHP " + (+val + 2500)); // <-- The problem was here } else { $('[name=price-total]').val("PHP 279"); } break; case "package1": $('[name=price-total]').val('PHP 300'); break; case "package2": $('[name=price-total]').val('PHP 400'); break; } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="radios"> <label> <input type="radio" value="non-exclusive" id="non-exclusive" name="packages"> Non-Exclusive </label> <label> <input type="radio" name="extratreats" data-target="#extratreat"> Extra-Treats </label> </div> <div id="extratreat" class="extratreat tab-pane collapse"> <label><h2>Extra Treats</h2></label> <br /> <label><input id="treats1" name="treats[]" value="Sweet Corner" type="checkbox" > Sweet Corner & Choco Fountain</label> <label><input id="treats2" name="treats[]" value="Popcorn Maker" type="checkbox" > Popcorn Maker</label> <label><input id="treats3" name="treats[]" value="Hotdog Roller" type="checkbox" > Hotdog Roller</label> </div> <div id="pricing"> <label><h2>Price</h2></label> <br /> <input type="text" name="price-total" value="" autocomplete="off" readonly> </div>