Question

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

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

不使用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回答完全正常，添加额外的“数据价格”felid并总计使用一些javascript。

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

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

但如果选择name="keystage1save"中的任何单选按钮，则系统会取消选中name="keystage1yr1"和name="keystage1yr2"中已选中的任何单选按钮。

问题在于，使用@Jamiec提供的javascript，如果选择了name="keystage1yr1"，则总数仍然会包含name="keystage1yr2"和name="keystage1save"的值。我需要它来计算选择

的单选按钮的总数

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

Answer 1

没有Javascript，没有 - 肯定不是。

使用Javascript解析每个收音机旁边的文本，是的 - 但非常棘手

在包含原始数量的广播中添加额外属性，使用Javascript，是 - 不是很难

添加一个额外的属性（最好是data-amount），使用像jQuery这样的库，是的 - 轻松的柠檬挤压！

使用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中选择的内容。如果您通过代码取消选中某些复选框，则需要重新计算所选内容。

此代码的更新似乎与您在评论中描述的内容相同：

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并在服务器端正确执行

使用radiobuttons和值的ID创建一个数组，然后点击查找该值并将其添加到总数

滥用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

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

计算单选按钮

3 个答案: