将选择器与 jquery 中的输入值相乘
multiply selectors with input values in jquery
我的计算不太好。也许你可以帮助我:
<input id="count" min="1" value="1" class ="txtMult form-control" type="number" name="txtEmmail" />
<input type="text" value="250" class ="txtMult" name="txtEmmail"/>
<span class="multTotal">250</span>
<select class="selectpicker">
<option value="1">multiply with 1</option>
<option value="2">multiply with 2</option>
</select>
<span id="grandTotal">250</span>
这里是 Javascript:
$(function(){
$('input').change(function(){
var p=$(this).parent().parent()
var m=p.find('input.txtMult')
var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
var res=p.find('.multTotal')
res.html(mul);
var total=0;
$('.multTotal').each(function(){
total+=parseInt($(this).html())
})
$('#grandTotal').html(parseInt(total).toFixed(2))
});
})
$(window).load(function(){
$('select').change(function() {
$("#grandTotal").html($('select').val()*$('.multTotal').html())
});
});
</script>
所以我希望#grandTotal 总是正确变化。如果 select 例如 "multiply with 2" 并且在更改我的“#count”的值之后,“#grandTotal”应该会自动显示正确的数字。我对计算很困惑。也许你看得更清楚了。非常感谢
在javascript端计算时,必须解析为int或float。
您可以使用parseInt or parseFloat()
var i = parseInt( $('select').val()) * parseInt( $('.multTotal').html())
$("#grandTotal").html(i);
工作fiddle
http://jsfiddle.net/anilk/6fLk8w8a/1/
更新了 js
$(function(){
$('.txtMult').change(function(){
alert("work");
var p=$(this).parent().parent()
var m=p.find('input.txtMult')
var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
var res=p.find('.multTotal')
res.html(mul);
var total=0;
$('.multTotal').each(function(){
total+=parseInt($(this).html());
})
alert(parseInt(total).toFixed(2));
$('#grandTotal').html(parseInt(total).toFixed(2));
});
})
$('.selectpicker').change(function() {
calcVal();
});
function calcVal(){
alert($('select').val()*$('.multTotal').html());
$("#grandTotal").html($('select').val()*$('.multTotal').html())
}
// call on document load
calcVal();
您的绑定不正确,请使用正确的 class。
我的计算不太好。也许你可以帮助我:
<input id="count" min="1" value="1" class ="txtMult form-control" type="number" name="txtEmmail" />
<input type="text" value="250" class ="txtMult" name="txtEmmail"/>
<span class="multTotal">250</span>
<select class="selectpicker">
<option value="1">multiply with 1</option>
<option value="2">multiply with 2</option>
</select>
<span id="grandTotal">250</span>
这里是 Javascript:
$(function(){
$('input').change(function(){
var p=$(this).parent().parent()
var m=p.find('input.txtMult')
var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
var res=p.find('.multTotal')
res.html(mul);
var total=0;
$('.multTotal').each(function(){
total+=parseInt($(this).html())
})
$('#grandTotal').html(parseInt(total).toFixed(2))
});
})
$(window).load(function(){
$('select').change(function() {
$("#grandTotal").html($('select').val()*$('.multTotal').html())
});
});
</script>
所以我希望#grandTotal 总是正确变化。如果 select 例如 "multiply with 2" 并且在更改我的“#count”的值之后,“#grandTotal”应该会自动显示正确的数字。我对计算很困惑。也许你看得更清楚了。非常感谢
在javascript端计算时,必须解析为int或float。
您可以使用parseInt or parseFloat()
var i = parseInt( $('select').val()) * parseInt( $('.multTotal').html())
$("#grandTotal").html(i);
工作fiddle http://jsfiddle.net/anilk/6fLk8w8a/1/
更新了 js
$(function(){
$('.txtMult').change(function(){
alert("work");
var p=$(this).parent().parent()
var m=p.find('input.txtMult')
var mul=parseInt($(m[0]).val()*$(m[1]).val()).toFixed(2)
var res=p.find('.multTotal')
res.html(mul);
var total=0;
$('.multTotal').each(function(){
total+=parseInt($(this).html());
})
alert(parseInt(total).toFixed(2));
$('#grandTotal').html(parseInt(total).toFixed(2));
});
})
$('.selectpicker').change(function() {
calcVal();
});
function calcVal(){
alert($('select').val()*$('.multTotal').html());
$("#grandTotal").html($('select').val()*$('.multTotal').html())
}
// call on document load
calcVal();
您的绑定不正确,请使用正确的 class。