Question

编辑：感谢您的回复！不幸的是，使用.trigger（'change'）或.change（）手动运行事件无法正常运行。如果用户更改了一组单选按钮的值，但未更改另一组，则数学不会相加。还有其他建议吗？

它主要按照我的意愿工作，但我希望jquery函数在页面加载时以及用户更改单选按钮选择时运行。我该怎么做？

var price=$("input[name='courierrepairprice']").val();
price = Number(price.replace(/[^0-9\.]+/g,""));
var postage_out=0;
var postage_in=0
$("input[name='outwardpostage']").change(function()
{
   postage_out=$(this).val();
   tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
   tot_price=tot_price.toFixed(2)

   $('.tot_price').text('£'+tot_price); 
});
$("input[name='returnpostage']").change(function()
{
   postage_in=$(this).val();   
   tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
   tot_price=tot_price.toFixed(2)
   $('.tot_price').text('£'+tot_price);
});

Answer 1

使用.trigger('change')或.change（）手动模拟事件

var price=$("input[name='courierrepairprice']").val();
price = Number(price.replace(/[^0-9\.]+/g,""));
var postage_out=0;
var postage_in=0;

function calculate(){
    console.log('calc', price, postage_out, postage_in)
    var tot_price = price + postage_out + postage_in;
    tot_price=tot_price.toFixed(2)

    $('.tot_price').text('£' + tot_price);
}

$("input[name='outwardpostage']").change(function() {
    postage_out = parseFloat($(this).val());
    calculate();
}).filter(':checked').trigger('change');
$("input[name='returnpostage']").change(function() {
    postage_in =  parseFloat($(this).val());   
    calculate();
}).filter(':checked').trigger('change');

演示：Fiddle

Answer 2

在更改功能结束后再次调用您的更改事件以自动调用更改调用....

 $("input[name='outwardpostage']").change(function()
 {
  postage_out=$(this).val();
  tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
  tot_price=tot_price.toFixed(2)

  $('.tot_price').text('£'+tot_price); 
}).change();  //<--here ..same for other change event

Answer 3

另一种方法是将更改函数内的代码移动到明显的函数中，并在加载时调用它们，然后在更改侦听器中调用它。

$(document).load(function(){ 
    var doAction = function(){

    };

    $("input[name='returnpostage']").change(function()
    {
      doAction();
    };

    doAction();
});

Answer 4

嗨，你也可以试试这个

var price=$("input[name='courierrepairprice']").val();
price = Number(price.replace(/[^0-9\.]+/g,""));
var postage_out=0;
 var postage_in=0
$("input[name='outwardpostage']").change(function()
{
postage_out=$(this).val();
tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
tot_price=tot_price.toFixed(2)

$('.tot_price').text('£'+tot_price);
}).change();
$("input[name='returnpostage']").change(function()
{
postage_in=$(this).val();   
tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
tot_price=tot_price.toFixed(2)
$('.tot_price').text('£'+tot_price);
}).change();

JS小提琴演示Demo

Answer 5

DEMO FIDDLE

代码 -

var price=$("input[name='courierrepairprice']").val();
price = Number(price.replace(/[^0-9\.]+/g,""));
var postage_out=0;
var postage_in=0;
var fndo = function()
{
 postage_in=$(this).val()||postage_in;   
 tot_price=parseFloat(price,10)+parseFloat(postage_out,10)+parseFloat(postage_in,10)
 tot_price=tot_price.toFixed(2)
 $('.tot_price').text('£'+tot_price);
};

$("input[name='outwardpostage'], input[name='returnpostage']").change(fndo);
$(document).ready(fndo);

这里我使用了一个函数对象并调用了更改和文档就绪，为postage_in添加了一个条件，以防止在文档调用时undefined，因为文档没有值

如何在页面加载时运行jquery单选按钮功能？

5 个答案: