Question

我需要使用jQuery计算输入值。如果输入Gvalue为100且选择的百分比为10％，那么在最终值中，它应显示总值110，应该像100 * 10％+ 100 = 110。

value
<input type="text" name="gvalue"  class="input" required/>

Percentage
<select name="percent" id="percent" class="input" onchange="setStates();">
  <option value="Country" selected>Select Percentage</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Final Value
<input type="text" name="flvalue"  class="input" id="#total" required/>

Answer 1

使用事件处理程序并根据输入值计算总数。

// bind event handler to both input and select tag
$('#percent,#input').on('change input', function() {
  // parse input field value, if NaN treat as 0
  var val = Number($('#input').val()) || 0,
    // parse select field value, if NaN treat as 0
    per = Number($('#percent').val()) || 0;
  // calculate and update the total
  $('#total').val(val + val * per / 100)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
value
<input type="text" name="gvalue" id="input" class="input" required/>Percentage
<select name="percent" id="percent" class="input">
  <option value="Country" selected>Select Percentage</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Final Value
<input type="text" name="flvalue" class="input" id="total" required/>

Answer 2

$(document).on('change', 'select[name="percent"]', function(){
  var total = parseInt($('input[name="gvalue"]').val()) /   (parseInt($('select[name="percent"]').val()) / 100 ) + 100)
$('input[name="flvalue"]').val(total);
    })

Answer 3

您的HTML：

value
<input type="text" name="gvalue" id="gvalue" class="input" required/>

Percentage
<select name="percent" id="percent" class="input" onchange="setStates();">
  <option value="Country" selected>Select Percentage</option>
  <option value="5">5</option>
  <option value="10">10</option>
  <option value="15">15</option>
</select>

Final Value
<input type="text" name="flvalue"  class="input" id="total" required/>

您的JavaScript代码：

<script>
    function setStates(){
        var gvalue = $('#gvalue').val();
        if(gvalue){
            var gvalue = parseInt(gvalue);
            var percent = parseInt($('#percent').val());
            var final = (gvalue*percent/100)+100;
            $('#total').val(final);
        } else {
            $('#gvalue').css('border-bottom-color','red');
        }
    }
</script>

使用HTML进行jQuery计算

3 个答案: