将单选按钮值和文本字段值相乘，然后将其与另一个字段中的其他值相加？

Question

如何将单选按钮的值乘以文本框（作为其数量），然后将其添加到其他值（复选框）并将其合计为空白字段？

这是我的HTML

的结构

 <li class="numbers-row">
        <label>
        <input  type="radio" name="combos" id="item2-title"  value="The Name"/>
        The Thumbnail<p>The Title</p>
        <input type="textfield" name="quantity" id="item2-title"  value=""/>
        <input class="calc" type="hidden" name="item1-val" value="The Price">
        </label>
        </li>


<li class="numbers-row">
    <label>
    <input type="checkbox" name="combos[]" id="item2-title"  value="The Name"/>
    The Thumbnail<p>The Title</p>
    <input class="calc" type="hidden" name="item2-val" value="The Price">
    </label>
    </li>

 <p>Total: PHP <span id="price">0</span></p>

[编辑]

我从

开始这个jquery

 <script> 
 $(function() {

 $(".numbers-row").append('<div class="inc button">+</div><div class="dec button">-</div>');

 $(".button").on("click", function() {

var $button = $(this);
var oldValue = $button.parent().find("input").val();

if ($button.text() == "+") {
  var newVal = parseFloat(oldValue) + "The Price";
} else {
   // Don't allow decrementing below zero
  if (oldValue > 0) {
    var newVal = parseFloat(oldValue) - "The Price";
    } else {
    newVal = 0;
  }
  }

$button.parent().find("input").val(newVal);

 });

  });

Answer 1

以下脚本可以帮助您完成任务：

$(function() {
	
  var totalPlaceholder = $('#price');
  var qtyInput =  $('.positive_numbers');
  
  function calculateTotal() {
  	var quantity = qtyInput.val()*1;
    var tempTotal = 0;
    if (quantity) {
      var productSelected = $('input[name=product]:checked');
      if (productSelected.length > 0) {
        tempTotal += quantity * productSelected.val();
      }
    };
    $('input[name^=option]:checked').each(function(i) {
      var thisOptionValue = $(this).val();
      tempTotal += thisOptionValue*1;
    });
		totalPlaceholder.text( tempTotal );
  };
  
  qtyInput.on('input', function(e) {
    var thisQty = $(this);
    var thisQtyValue = thisQty.val();
    var validatedValue = thisQtyValue.replace(/[^\d]/g, '') * 1;
    if (thisQtyValue != validatedValue) {
      thisQty.val(validatedValue);
    };
    calculateTotal();
  });
  
  $('input[name=product], input[name^=option]').on('change', calculateTotal);
  
  $('.button').on('click', function(e) {
  	var thisButton = $(this);
    var increase = thisButton.hasClass('inc') ? 1 : -1;
    var currentValue = qtyInput.val();
    var newValue = currentValue*1 + increase;
    if( newValue<0 ) {
    	newValue=0;
    };
    qtyInput.val( newValue );
    calculateTotal();
  })

});

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  font-size: 16px;
}

.products-list {
  list-style: none;
  padding: 0;
}

.button {
  display: inline-block;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #000;
  cursor: pointer;
}

.inc {
  background: none green;
}

.dec {
  background: none red;
}

#price {
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="products-list">
  <li>
    <p>
      <label for="product1">
        <input type="radio" name="product" id="product1" value="20" /> Product 1 (20EUR)
      </label>
    </p>
    <p>
      <label for="product2">
        <input type="radio" name="product" id="product2" value="30" /> Product 1 (30EUR)
      </label>
    </p>
    <p>
      <input class="positive_numbers" type="text" name="quantity" id="item2-title" value="1" placeholder="Qty" />
      <span class="inc button">+</span>
      <span class="dec button">-</span>
    </p>

  </li>
  <li>
    <p>
      <label for="option1">
        <input type="checkbox" name="option1" id="option1" value="3" /> Include Option 1 (3EUR)
      </label>
    </p>
    <p>
      <label for="option2">
        <input type="checkbox" name="option2" id="option2" value="5" /> Include Option 2 (5EUR)
      </label>
    </p>
  </li>
</ul>

<p>Total: <span id="price">0</span>EUR</p>

同样在 JSFiddle Playground 。

在提问时，您应该尝试更准确。请记住，答案也应该对其他人有用。