单选按钮的计算

Question

我有一组用于某些产品的单选按钮。我希望能够在表单底部有一个总框，它添加了每个单击的单选按钮的总和。我知道这可以通过单选按钮的值然后使用一些javascript来完成。

问题是我不认为我可以使用该方法，因为我需要这些值是它们在下面的代码中的样子，所以当我从表单提交中收到电子邮件时，我可以看到用户选择了哪些选项。

任何不使用 javascript 或使用值的建议？

<input class="radio" type="radio" name="keystage1yr1" value="Paper" /> <span>&#163;25</span>

<input class="radio" type="radio" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span>

<input class="radio" type="radio" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span>

<input class="radio" type="radio" name="keystage1yr2" value="Paper" /> <span>&#163;25</span>

<input class="radio" type="radio" name="keystage1yr2" value="CD" /> <span>&#163;25 excl VAT</span>

<input class="radio" type="radio" name="keystage1yr2" value="Paper & CD" /> <span>&#163;40 excl VAT</span>

<input class="radio" type="radio" name="keystage1save" value="Paper" /> <span>&#163;47.50</span>

<input class="radio" type="radio" name="keystage1save" value="CD" /> <span>&#163;47.50 excl VAT</span>

<input class="radio" type="radio" name="keystage1save" value="Paper & CD" /> <span>&#163;75 excl</span> 

是否可以为每个单选按钮添加 price="20" 等内容，然后将它们添加起来？

编辑

好吧，在玩了 Jamiec 代码之后，我意识到它会将已检查但不再检查的单选按钮的总数加起来。因为我也有一些 javascript 执行以下操作：

name="keystage1yr1" 中只能选择一个单选按钮 只能选择name="keystage1yr2" 中的一个单选按钮

但如果name="keystage1save" 中的任何单选按钮被选中，那么name="keystage1yr1" 和name="keystage1yr2" 中任何已选中的单选按钮都将被取消选中。

问题是使用@Jamiec 提供的javascript，如果选择name="keystage1save"，总数仍将具有name="keystage1yr1" 和name="keystage1yr2" 的值。我需要它来计算选中

的单选按钮的总数

EDIT2 @Jamiec 更新了不将值存储在缓存中的答案修复了问题

Answer 1

如果没有 Javascript，不 - 肯定不会。

使用 Javascript 解析每个收音机旁边的 span 内的文本，是的 - 但相当棘手

为包含原始金额的收音机添加一个额外的属性，使用 Javascript，是的 - 不是很难

添加一个额外的属性（最好是data-amount），使用 jQuery 之类的库，是的 - 简单的 peasy lemon squeezy！

---

一个使用 jQuery 的示例。

增加你的每个收音机的喜欢：

<input class="radio" type="radio" name="keystage1yr1" value="Paper" data-price="25" /> <span>&#163;25</span>

添加一个总计字段，例如：

<input id="total" type="text">

并使用以下代码。

var values = {}; // index to store the selection from each named group of radio's

$('input:radio').change(function(){
  var name = $(this).attr('name');
  values[name] = parseFloat($(this).data('price'));
  var total = 0.0;
    $.each(values,function(i,e){
        total += e;
    });
    $('#total').val(total.toFixed(2));
});

现场示例：http://jsfiddle.net/UL2JP/

---

编辑，上面的代码只添加了那些被选中的复选框，不幸的是，它缓存了之前在javascript对象values中选择的内容。如果您通过代码取消选中某些复选框，则需要重新计算选中的内容。

此代码的更新似乎与您在 cmets 中描述的一样：

var values = {};

$('input[name="keystage1save"]').click(function(){
    $('input:radio:not([name="keystage1save"])').prop('checked',false);
    values = {};
});

$('input:radio').change(function(){
  var name = $(this).attr('name');
  values[name] = parseFloat($(this).data('price'));
  var total = 0.0;
    $.each(values,function(i,e){
        total += e;
    });
    $('#total').val(total.toFixed(2));
});

现场示例：http://jsfiddle.net/UL2JP/1/

---

编辑2：只是一个想法，没有必要真的缓存选定的值，直接计算会更快：

$('input[name="keystage1save"]').click(function(){
    $('input:radio:not([name="keystage1save"])').prop('checked',false);
});

$('input:radio').change(function(){
    var total = 0.0;
    $('input:radio:checked').each(function(){
          total += parseFloat($(this).data('price'));
    });
    $('#total').val(total.toFixed(2));
});

现场示例：http://jsfiddle.net/UL2JP/2/

Answer 2

你可以做三件事：

• 在服务器端正确使用 AJAX
• 使用单选按钮的 ID 和值创建一个数组，然后 onClick 查找该值并将其添加到总数中
• 误用id属性存值，写一些js，加起来。例如#val1_1 #val2_4 等（不推荐）

您是否希望我详细说明这些选项之一。

如果您不想使用 AJAX，我建议您选择选项二，这样比较优雅。

HTML：

<input class="radio" type="radio" id="ks1p" name="keystage1yr1" value="Paper" /> <span>&#163;25</span>

<input class="radio" type="radio" id="ks1c" name="keystage1yr1" value="CD" /> <span>&#163;25 excl VAT</span>

<input class="radio" type="radio" id="ks1cp" name="keystage1yr1" value="Paper & CD" /> <span>&#163;40 excl VAT</span>

<input class="radio" type="radio" id="ks2p" name="keystage1yr2" value="Paper" /> <span>&#163;25</span>

//etc..

JS：

var prices= new Array();
prices["ks1p"]=1;
prices["ks1c"]=2;
prices["ks1cp"]=3;
//etc
var lastPrice = new Array();
lastPrice ["keystage1yr1"]=0;
lastPrice ["keystage1yr2"]=0;
//etc
var totalPrice = 0;
$('.radio').click(function(){
   var id = $(this).attr('id');
    var name= $(this).attr('name');
   if(lastPrice[name] != 0){
     totalPrice = totalPrice  - lastPrice[name];
   }
   lastPrice[name] = prices[id];
   totalPrice = totalPrice +  prices[id];
   alert(totalPrice);
});

小提琴：http://jsfiddle.net/nggLr/

Answer 3

如果您使用某种服务器端代码构建它，请使用它来计算总价格