Fatal编程技术网
  • javascript/
  • Javascript 从单选按钮到int和calculate的值

Javascript 从单选按钮到int和calculate的值

javascript jquery html

Javascript 从单选按钮到int和calculate的值,javascript,jquery,html,radio-button,Javascript,Jquery,Html,Radio Button,我刚刚开始编程，所以答案可能是显而易见的。我的代码有一个单选按钮（服务价格）和一个下拉菜单（订单数量），我想用这些值进行计算。到目前为止还不错，我花了将近一天的时间才得到这个简短的代码 我现在的问题是，我需要实时显示结果，可能是在输入标记中，如 <p><strong>Amount (US$)</strong>: <input type="text" name="amount" id="amount" /></p> 金额（美元）：

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

我现在的问题是，我需要实时显示结果，可能是在输入标记中，如

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


基础知识
DEF
1.
2.
3.
金额（美元）：
谢谢你的帮助

编辑：好的，即使计算是错误的。我想获得选中单选按钮的值，并将其转换为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>


var x=$（'input[name=“test”]：checked'）.val（）；
var xInt=parseInt（x，10）；
函数计算（val）{
var结果=val*xInt；
var amountPrint=document.getElementById（“金额”）；
amountPrint.value=结果；
}
$（“.test”）。单击（函数（事件）{
var合计=0；
$（“.test:选中”）.each（函数（）{
total+=parseInt（$（this.val（））；
});
如果（总计==0）{
$（'金额'）.val（''）；
}否则{
$（'金额'）.val（总计）；
}
});
我仍然有一个问题，我需要实时显示结果，这取决于选中了哪个单选按钮和下拉值。因此，我在单选按钮中添加了一个类“test”，并添加了上述函数。现在，根据选中的单选按钮，我实时得到了结果，但计算仍然错误，我需要以某种方式将其合并



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


基础知识
DEF
1.
2.
3.
金额（美元）：

var x=$（'input[name=“test”]：checked'）.val（）；
var xInt=parseInt（x，10）；
函数计算（val）{
var结果=val*xInt；
var amountPrint=document.getElementById（“金额”）；
amountPrint.value=结果；
}
您只需要将一个新值推送到金额区域

我所做的就是在金额输入中添加一个
value=“
，可以跳过，但这是一个很好的做法

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

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

例如，您还可以添加
，并以大致相同的方式调用

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

基于上述评论

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

//通过单选按钮循环，首先找到具有该名称的所有元素，然后可以
//循环以检测onClick。
var radios=document.getElementsByName（'test'）
对于（变量i=0，max=radios.length；i
您可能需要以稍微不同的方式重写代码，因为您要在代码中处理两个变量，但您的函数只接受一个变量

因此，为了避免进行另一个循环，只需给它一个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>


基础知识
DEF
1.
2.
3.
金额（美元）：

var x=$（'input[name=“test”]：checked'）.val（）；
var xInt=parseInt（x，10）；
//获取要打印到的输入框
var amountPrint=document.getElementById（“金额”）；
//您命名为test的所有无线电设备
var radios=document.getElementsByName（'test'）
函数计算（val）{
var结果=val*xInt；
//var amountPrint=document.getElementById（“金额”）；
amountPrint.value=结果；
}
var radios=document.getElementsByName（'test'）
对于（变量i=0，max=radios.length；i
谢谢您的帮助。这让我又向前迈了一步，但我还是错过了一些东西。我不知道为什么，但我在计算中得到了错误的结果，显然我写问题时太累了。我需要始终显示结果，这取决于选中了哪个单选按钮。现在，当我操作下拉菜单时，它就显示出来了。错误计算的问题仍然存在，它只计算第一个单选按钮的值（“500”）。我将编辑我的问题…当单选按钮中检测到更改时，您需要再次运行代码。