Question

我希望从select，radio和text中将多个输入相加。

我有以下代码，它可以工作，但取消了每个不同的输入，我希望将它们全部加在一起。

我知道有更好的方法来构建这个，但我似乎无法找到一个好的解决方案。

查看

    <select>
    <option value='0.0'>Product 1</option>
    <option value='0.5'>Product 2</option>
    <option value='1.0'>Product 3</option>
    <option value='0.5'>Product 4</option>
    </select>

    <h4>Desired price</h4>
    <input class="inputBox form-control" type="text" id="desired_price" >

    <form>
    <label class="radio inline">
    <input type="radio" name="location" value="0.1" > location 1
    </label>
    <label class="radio inline">
    <input type="radio" name="location" value="0.1" > location 2
    </label>
    <label class="radio inline">
    <input type="radio" name="location" value="0.4" > location 3
    </label>
    <label class="radio inline">
    <input type="radio" name="location" value="0.7" > location 4
    </label>
    <label class="radio inline">
    <input type="radio" name="location" value="1.0" > location 5
    </label>
    </form>

<b id="score_total">0</b>

的jQuery

$(document).ready(function() {
 var desiredPrice = document.getElementById("desired_price");

 desiredPrice.onkeyup = calc;

 function calc() {
  document.getElementById("score_total").innerHTML = parseFloat(desiredPrice.value).toFixed(1);
    }

 // All radios sum gathered
 $('input[type=radio]').change(function(){
 var total = 0;
 $('input[type=radio]:checked').each(function(){
  total += Number($(this).val());
 });
  $('#score_total').html(total);
 });

 // select
 $('select').change(function(){
  var variety = 0;
 $('select :selected').each(function() {
  variety += Number($(this).val());
 });
  $('#score_total').html(variety);
 });

});

Answer 1

您必须为#score_total定义'change'事件处理程序，然后在select，radio和textbox change上触发#score_total change事件。

此代码可以帮助您。

您可以编辑代码here并在编辑后使用它。

$(document).ready(function() {
  $('#score_total').on('change', function() {
    var sum = 0;
    $('select, [type=text], [type=radio]:checked').each(function(){
      sum += Number($(this).val());	
    });
    $(this).text(sum);
  });
  $('select').on('change', function(){
  	$('#score_total').trigger('change');	
  });
  $('[type=text]').on('keyup', function(){
  	$('#score_total').trigger('change');
  });
  $('[type=radio]').on('click', function(){
  	$('#score_total').trigger('change');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
  <option value='0.0'>Product 1</option>
  <option value='0.5'>Product 2</option>
  <option value='1.0'>Product 3</option>
  <option value='0.5'>Product 4</option>
</select>

<h4>Desired price</h4>
<input class="inputBox form-control" type="text" id="desired_price">

<form>
  <label class="radio inline">
    <input type="radio" name="location" value="0.1"> location 1
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="0.1"> location 2
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="0.4"> location 3
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="0.7"> location 4
  </label>
  <label class="radio inline">
    <input type="radio" name="location" value="1.0"> location 5
  </label>
</form>

<b id="score_total">0</b>

Answer 2

试试这个：

$(document).ready(function() {

   var totalValues = [0.0, 0.0, 0.0]; // array that stores parcial totals
   var desiredPrice = document.getElementById("desired_price");

     var totalCalc = function(){ //Calculates and displays total sum
       document.getElementById("score_total").innerHTML = (totalValues[0] + totalValues[1] + totalValues[2]).toFixed(1);
   }

   //Functions to calculate each block sum
   var calcDesiredPrice = function(){     
     totalValues[0] = parseFloat(desiredPrice.value);
     totalCalc();
   }

   var calcRadios = function(){
     var total = 0;
     $('input[type=radio]:checked').each(function(){
       total += Number($(this).val());
     });
     totalValues[1] = total;
     totalCalc();
   }

   var calcSelect = function(){
     var variety = 0;
     $('select :selected').each(function() {
      variety += Number($(this).val());
     });

     totalValues[2] = variety;
     totalCalc();
   } 

   //Set the handlers for the form changes
   desiredPrice.onkeyup = calcDesiredPrice;
   $('input[type=radio]').change(calcRadios);
   $('select').change(calcSelect); 

});

多种输入类型总和

2 个答案: