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

Question

I'm looking for a way to add another value into my input text. I have a read only input box, two radio buttons, and three checkboxes.

<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>

I've added a javascript to my radio button where if I click on non-exlusive the value of pricing will change to 279 . But I don't know how to add more value to if I add from treats . For example the price of Sweet Corner is 2,500 and they also clicked on Non-Exlusive which has 279 as it's default value, how do I add 2,500 to the already specified 279?

Here's the script I tried using:

<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>

It gives me an "undefined value" if I click one of the checkboxes instead of adding it's value to the first value.

Answer 1

The problem was that you made a variable called val and then tried to access it with val.val + ' 2500' when it should have just been val + ' 2500' . val.val implies that there is a val object with a val property. Since there isn't, you got undefined .

You also have a syntax error with this:

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

As it should be:

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

Also, I think that because of what your are testing, switch statements are more appropriate.

Lastly, you have multiple items with the same id , which isn't valid. After making them all unique, you should change your second click handler so that it accesses all the checkboxes by using the name attribute instead of 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>