Question

所以我对编程很陌生，但我有一个HTML表单，其中包括用户可以选择的5个单选按钮以及用户需要写入数字的文本框。我想在用户按下计算按钮时将所选单选按钮的值乘以写入文本框的值。我一直在尝试使用HTML表单中的脚本执行此操作，但我无法使其工作。有人可以帮忙吗???

Answer 1

首先，您需要获得对文本输入的引用，然后您将需要获取可以使用查询选择器完成的所选单选按钮。那么你就需要将两者相乘。

以下是执行此操作的最基本方法：

let input = document.querySelector('input[type=number]')
let checked = document.querySelector('[name=radio]:checked')

let result = parseFloat(input.value) * parseFloat(checked.value)

这是一个有效的例子：

// Get reference to the input field
let input = document.querySelector('input[type=number]')
let output = document.querySelector('output')

// Create radio button event listeners
Array.from(document.querySelectorAll('input[type=radio]')).forEach(input => {
  // When the radio changes recalculate
  input.addEventListener('change', e => {
    e.preventDefault()
    calculate()
  })
})

// And the textbox event listner
// When the value changes recalculate
input.addEventListener('input', e => {
  e.preventDefault()
  calculate()
})

// Make calculation
function calculate() {
  // Get the checked radio
  let checked = document.querySelector('[type=radio]:checked')
  // Get its value. If no radio is checked default to 0
  let value = checked ? checked.value : 0
  // Multiply the radio time the text box
  let result = parseFloat(value) * parseFloat(input.value)
  // Set the output value use 0 if the result is not a number
  output.value = !isNaN(result) ? result : 0
}

<form>
  <label><input type="radio" value="1" name="radio"> 1</label>
  <label><input type="radio" value="2" name="radio"> 2</label>
  <label><input type="radio" value="3" name="radio"> 3</label> &times;
  <input type="number" id="txt" placeholder="Enter a number"> =
  <output>0</output>
</form>

Answer 2

我希望这会帮助您创建类似于您所要求的逻辑。谢谢。

＆＃13;

function testcalc(){
var val1= parseInt($("input[name='multiplier']:checked")[0].value);
var val2= parseInt($("#testinput")[0].value);
$('#testanswer').text(val1*val2);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="testinput" value="0">
<input type="radio" name="multiplier" value="2">2
<input type="radio" name="multiplier" value="3">3
<input type="radio" name="multiplier" value="4">4
<input type="radio" name="multiplier" value="5">5
<input type="radio" name="multiplier" value="6">6
<button onClick="testcalc()">Calculate</button>
<p><span id="testanswer"></span></p>

＆＃13;

将单选按钮值乘以javacsript中的文本框值？

2 个答案: