JQUERY - 从价目表中即时总结字段值

我有一个价目表，并希望在表格中显示用户对其总价格所作选择的总结。JQUERY - 从价目表中即时总结字段值

要做到这一点，我试图做这样

HTML

<div> 
    <p>PICK ONE</p> 
    <input type="radio" name="weight" value="range-1" checked><label>0-10 ($ 10)</label> 
    <input type="radio" name="weight" value="range-2"><label>10-20 ($ 20)</label> 
    <input type="radio" name="weight" value="range-3"><label>20-30 ($ 30)</label> 
</div> 

<div> 
    <p>ADD EXTRA</p> 
    <input type="checkbox" id="urgentchk" name="urgentchk" value="1" /><label>Urgent ($ 40)</label> 
    <input type="checkbox" id="meetchk" name="meetchk" value="1" /><label>Meet ($ 60)</label> 
</div> 

<div> 
    <p>TOTAL</p> 
    <table id="items"></table> 
    <table id="total"></table> 
</div>

$('#urgentchk').change(function() { 
    if(this.checked) 
    { 
     var content = "<tr id='one'><td>Urgent $ 40</td></tr>"; 
     var prize = parseFloat($(this).attr('prize')); 
     $('#items').append(content); 
    } 
    else 
    { 
     $('#one').remove(); 
    } 
}); 

$('#meetchk').change(function() { 
    if(this.checked) 
    { 
     var content = "<tr id='two'><td>Meet $ 60</td></tr>"; 
     var prize = parseFloat($(this).attr('prize')); 
     $('#items').append(content); 
    } 
    else 
    { 
     $('#two').remove(); 
    } 
});

现在，不幸的是，我有两个问题，我不知道如何解决：

显示所选的f ＃字段中的字段（单选按钮）与字段复选框一样。
计算#total中选定字段的价格（总和）。

我该怎么做？感谢

FIDDLE

来源

2014-09-30 Paolo Rossi

首先你需要创建负责总的计算功能。在此之后，你需要你想你总要重新计算每次调用这个函数：在页面加载，对要素的变化等

var updateTotal = function() { 

    var total = 0; 

    total += parseFloat($('input[name=weight]:checked').attr('prize')); 

    total += ($('input[name=urgentchk]:checked').length > 0) ? parseFloat($('input[name=urgentchk]:checked').attr('prize')) : 0; 

    total += ($('input[name=meetchk]:checked').length > 0) ? parseFloat($('input[name=meetchk]:checked').attr('prize')) : 0; 

    $('#total').html("Total: $" + total); 

};

然后你只需要调用这个函数，只要你认为合适的：

updateTotal();

例如，检查#meetchk后：

$('#meetchk').change(function() { 

    if(this.checked) 
    { 
     ... 
    } 

    updateTotal(); 

});

，将始终重新计算从头开始的总价格。有时可能会很昂贵，这取决于您的应用程序。请看下面的小提琴。祝你好运！

http://jsfiddle.net/pq46skgn/5/

来源

2014-09-30 14:56:28 denisol

是我正在尝试做的！就一件事。如何显示div＃项目中单选按钮的内容？与另一个功能？谢谢！ – 2014-09-30 15:08:48

对不起，最后一件事为什么使用updateTotal var = function（）而不是函数updateTotal（）？谢谢！ – 2014-09-30 15:13:45

您可以使用收音机的“更改”功能，并以与复选框相同的方式显示内容。只需使用选择器$（'input [name = weight]'）关于你的第二个问题，你可以从这里开始： http://stackoverflow.com/questions/1013385/what-is-the-difference-between- a-function-expression-vs-declaration-in-javascrip – denisol 2014-09-30 15:25:57

JQUERY - 从价目表中即时总结字段值

回答

相关问题