[英]Multiply and add 2 input boxes using jquery
我希望腳本將輸入框的值乘以隱藏輸入的值,然后在單擊按鈕時打印結果。
腳本幾乎可以做到這一點,但只能用於1個輸入。
有任何簡單的方法嗎?
非常感激。
小提琴: http : //jsfiddle.net/eN7S6/3/
<table>
<tr>
<td>
<input name="inputone" id="inputone" class="calc" value="1"><span id="Total"></span>
</td>
</tr>
<tr>
<td>
<input name="inputone" id="inputone" class="calc" value="1"><span id="Total"></span>
</td>
</tr>
</table>
<input name="inputtwo" id="inputtwo" class="calc" value="2" type="hidden" readonly>
<input name="inputtwo" id="inputtwo" class="calc" value="3" type="hidden" readonly>
<input type="button" id="update" value="Calculate" />
和jQuery
$(document).ready(function() {
$('#update').click(function() {
var inputone = $('#inputone').val();
var inputtwo = $('#inputtwo').val();
var totalTotal = ((inputone * 1) * (inputtwo * 1));
$('#Total').text(totalTotal);
});
});
您的元素ID不是唯一的。 您有重復項,例如“ inputone”和“ inputtwo”。
我已經更改了他們的名字,並增加了一個新的總跨度。
這是更新的代碼:
<table>
<tr>
<td>
<input name="inputone" id="inputone" class="calc" value="1"><span id="TotalOne"></span>
</td>
</tr>
<tr>
<td>
<input name="inputtwo" id="inputtwo" class="calc" value="1"><span id="TotalTwo"></span>
</td>
</tr>
</table>
<input name="multiplierone" id="multiplierone" class="calc" value="2" type="hidden" readonly>
<input name="multipliertwo" id="multipliertwo" class="calc" value="3" type="hidden" readonly>
<input type="button" id="update" value="Calculate" />
和jQuery:
$(document).ready(function() {
$('#update').click(function() {
var inputone = $('#inputone').val();
var multiplierone = $('#multiplierone').val();
var inputtwo = $('#inputtwo').val();
var multipliertwo = $('#multipliertwo').val();
var totalTotalOne = (inputone * multiplierone);
var totalTotalTwo = (inputtwo * multipliertwo);
$('#TotalOne').text(totalTotalOne);
$('#TotalTwo').text(totalTotalTwo);
});
});
並更新了jsFiddle: http : //jsfiddle.net/eN7S6/4/
這個小算法將獲取所有input.calc
元素並將它們的值相乘。 認為這應該基於給定的html為您工作。
var total = 1;
$("input.calc").val(function(idx, val) {
total*= val;
})
$('#Total').text(total);
永遠不會有兩個IDs
在同一個頁面上是相同的,這就是發明class
的原因。
修改您的代碼,如下所示:
<table>
<tr>
<td>
<input name="inputone"class="inputone calc" value="1"><span id="Total"></span>
</td>
</tr>
<tr>
<td>
<input name="inputone" class="inputone calc" value="1"><span id="Total"></span>
</td>
</tr>
</table>
<input name="inputtwo" class="calc inputtwo" value="2" type="hidden" readonly>
<input name="inputtwo" class="calc inputtwo" value="3" type="hidden" readonly>
<input type="button" id="update" value="Calculate" />
然后:
$(document).ready(function() {
$('#update').click(function() {
var inputone = $('.inputone').val();
var inputtwo = $('.inputtwo').val();
var totalTotal = ((inputone * 1) * (inputtwo * 1));
$('#Total').text(totalTotal);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.