从单选按钮到 int 的值并计算答案

【问题标题】：Value from radio button to int and calculate从单选按钮到 int 的值并计算
【发布时间】：2018-11-21 01:19:40
【问题描述】：

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

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

这样的输入标签中

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

我仍然遇到问题，我需要实时显示结果，具体取决于选中的单选按钮和下拉值。所以我在单选按钮中添加了一个类“测试”并添加了上述功能。现在我得到了实时的结果，这取决于选中的单选按钮，但计算仍然是错误的，我需要以某种方式组合它。

【问题讨论】：

标签： javascript jquery html radio-button

【解决方案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="" 添加到 Amount 输入，可以跳过，但这是 IMO 的好习惯。

然后在js下面。通过您之前提供的 id 获取元素。

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

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

我希望这会有所帮助。如果是，请将答案标记为已接受。

【讨论】：

感谢您的帮助。它让我更进一步，但我仍然错过了一些东西。我不知道为什么，但我的计算得到了错误的结果，显然我写问题时太累了。我需要始终显示结果，具体取决于选中的单选按钮。现在它只是显示，当我操作下拉菜单时。并且错误计算的问题仍然存在，它仅使用第一个单选按钮值（“500”）进行计算。我将编辑我的问题....
当在单选按钮中检测到更改时，您需要再次运行代码。

【解决方案2】：

根据上面的 cmets

要将字符串转换为 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>

【讨论】：