我想自动计算5个文本框而无需使用主文本框的值中的提交按钮,因此
1个文本框=(自动计算)5个文本框
这是我<head>
标记中的js
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$('#tb6').keyup(function(){
var textbox;
var tb1;
var tb2;
var tb3;
var tb4;
var tb5;
textbox = parseInt($('#textbox').val());
tb1 = parseInt($('#tb1').val());
tb2 = parseInt($('#tb2').val());
tb3 = parseInt($('#tb3').val());
tb4 = parseInt($('#tb4').val());
tb5 = parseInt($('#tb5').val());
tb1 = textbox * 0.10;
tb2 = textbox * 0.10;
tb3 = textbox * 0.10;
tb4 = textbox * 0.50;
tb5 = tb1+ tb2 + tb3;
var tb6 = tb4 - tb5;
$('#tb6').val(tb6.toFixed(2));
});
</script>
</head>
形成
<form>
<br>input textbox: <input id = "textbox" type = "text" name="textbox" required>
</td>
</td>
</table>
<table>
<tr><td>
<br>
<p id="para">label1</p>
<br>textbox1: <input id = "tb1" type = "text" name = "tb1" required>
<br>textbox2: <input id = "tb2" type = "text" name = "tb2" required>
<br>textbox3: <input id = "tb3" type = "text" name = "tb3" required>
</td>
<td><br><br><br><br><p id="paraa">label2</p>
<br>textbox4: <input id = "tb4" type = "text" name = "tb4" readonly>
<br>textbox5: <input id = "tb5" type = "text" name = "tb5" readonly>
// result
<br>textbox5: <input id = "tb6" type = "text" name = "tb6" readonly>
</td></tr>
</form>
我在JS上是新手,我不知道出了什么问题。我如何自动计算?
感谢大伙们
https://jsfiddle.net/no619pmu/5/
最佳答案
您在tb6
中以只读方式编写了只读内容,并在同一输入上键入了keyup,这是不可能的
做$('input[type="text"]').keyup(function() {
如果要对输入文本进行自动计算。
根据你的代码我在jQuery中修改
$('input[type="text"]').keyup(function() {
var textbox = parseInt($('#textbox').val());
var tb1 = parseInt($('#tb1').val());
var tb2 = parseInt($('#tb2').val());
var tb3 = parseInt($('#tb3').val());
var tb4 = parseInt($('#tb4').val());
var tb5 = parseInt($('#tb5').val());
tb1 = textbox * 0.10;
tb2 = textbox * 0.10;
tb3 = textbox * 0.10;
tb4 = textbox * 0.50;
tb5 = tb1 + tb2 + tb3;
var tb6 = tb4 - tb5;
$('#tb6').val(tb6.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<br>input textbox:
<input id="textbox" type="text" name="textbox" required>
<table>
<tr>
<td>
<br>
<p id="para">label1</p>
<br>textbox1:
<input id="tb1" type="text" name="tb1" required>
<br>textbox2:
<input id="tb2" type="text" name="tb2" required>
<br>textbox3:
<input id="tb3" type="text" name="tb3" required>
</td>
<td>
<br>
<br>
<br>
<br>
<p id="paraa">label2</p>
<br>textbox4:
<input id="tb4" type="text" name="tb4" readonly>
<br>textbox5:
<input id="tb5" type="text" name="tb5" readonly>
// result
<br>textbox5:
<input id="tb6" type="text" name="tb6" readonly>
</td>
</tr>
</table>
</form>
//因为您没有提到其他文本框中的内容。