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 的价格 2,500 ，他们还点击了非Exlusive ，其中有279个，因为它是默认值，如何将2,500添加到已指定的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>

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

1 个答案: