Question

我刚开始编程，所以答案可能显而易见。我的代码有一个单选按钮（服务价格）和一个下拉菜单（订单数量），我想使用这些值进行计算。到目前为止一切顺利，我花了将近一天的时间来获取此简短代码。

我的问题是，我需要将结果实时显示，可能在

之类的输入标签中

   <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p>

也许还有更好的方法？因此，应始终选中两个单选按钮之一并显示其价格。当用户从下拉菜单中选择数量时，结果应自动刷新。谁能帮我？

<html lang="en">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 </head>

 <body>    
   <label>ABC
    <input class="test" type="radio" checked="checked" name="test" value="500">
   </label>
   <label>DEF
    <input class="test" type="radio" name="test" value="800">
   </label>
   <select size="1" name="dropdown" onchange='calculate(this.value);'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
   </select>
   <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p>
 </body>

谢谢您的帮助！

edit：好的，即使计算错误。我想获取一个选中的单选按钮的值并将其转换为一个int。之后，我需要将int与复选框中的值相乘。我不知道自己缺少什么，但是即使我检查了第二个单选按钮的值，也总是使用第一个单选按钮的值进行计算。

<script>
 var x = $('input[name="test"]:checked').val();
 var xInt = parseInt(x, 10);

 function calculate (val) {
  var result = val * xInt ;
  var amountPrint = document.getElementById('amount');
  amountPrint.value = result;
 }

$(".test").click(function(event) {
    var total = 0;
    $(".test:checked").each(function() {
        total += parseInt($(this).val());
    });

    if (total == 0) {
        $('#amount').val('');
    } else {                
        $('#amount').val(total);
    }
});
</script>

我仍然遇到问题，我需要将结果实时显示，这取决于检查了哪个单选按钮和下拉值。因此，我向单选按钮添加了一个“测试”类，并添加了上述功能。现在，根据选中的单选按钮，我可以实时获得结果，但是计算仍然不正确，我需要以某种方式进行组合。

Answer 1

<html lang="en">
 <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
 </head>

 <body>    
   <label>ABC
    <input type="radio" checked="checked" name="test" value="500">
   </label>
   <label>DEF
    <input type="radio" name="test" value="800">
   </label>
   <select size="1" name="dropdown" onchange='calculate(this.value);'>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
   </select>
   <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>
 </body>

<script>
 var x = $('input[name="test"]:checked').val();
 var xInt = parseInt(x, 10);


 function calculate (val) {
  var result = val * xInt ;
  var amountPrint = document.getElementById('amount');
  amountPrint.value = result;
 }
</script>

您只需要将新值推送到金额区域即可。

我所做的只是向金额输入中添加了value=""，可以跳过，但这是IMO的良好做法。

然后在下面的js中。通过前面提供的ID获取元素。

然后使用您的计算，并告诉它更改id 'amount'的值

例如，您还可以添加<p id='printResultsHere'></p>并以相同的方式调用。

我希望这会有所帮助。如果可以，请标记为接受。

Answer 2

基于上面的评论

要将字符串转换为int，请使用parseInt()来检测更改，您需要检测到单选按钮。现在，您可以手动将onChange =或onClick =添加到所有它们。有两个为什么不可以，但是如果您打算拥有更多，它们都会改变结果。您可以遍历它们。

将此添加到代码底部

  //Loop through the radio buttons, first find all the elements with that Name then you can
  //loop through to to detect the onClick. 
  var radios = document.getElementsByName('test')
  for (var i = 0, max = radios.length; i < max; i++) {
    radios[i].onclick = function () {
      console.log(parseInt(this.value));
    }
  }

您可能需要以不同的方式重写代码，因为您要在代码中处理两个变量，但是您的函数只接受一个。

因此，为避免执行另一个循环，只需给它提供一个ID并继续前进即可。因此，现在每次更改复选框时，它将使用下拉列表中的当前值重新运行代码。

以下内容符合我的要求。

<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

    <label>ABC
      <input type="radio" checked="checked" name="test" value="500">
    </label>
    <label>DEF
      <input  type="radio" name="test" value="800">
    </label>
    <select size="1" id='dropdown' name="dropdown" onchange='calculate(this.value);'>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" value="" /></p>


</body>

<script>
  var x = $('input[name="test"]:checked').val();

  var xInt = parseInt(x, 10);

  //Get the input Box you want to print to 
  var amountPrint = document.getElementById('amount');
  //All the radio boxes which you named test
  var radios = document.getElementsByName('test')
  function calculate(val) {
    var result = val * xInt;
    //var amountPrint = document.getElementById('amount');
    amountPrint.value = result;
  }
  var radios = document.getElementsByName('test')
  for (var i = 0, max = radios.length; i < max; i++) {
    radios[i].onclick = function () {
      xInt = parseInt(this.value, 10)
      calculate(document.getElementById('dropdown').value)
    }
  }

</script>

从单选按钮到整数并计算的值

2 个答案: