添加选中的单选按钮总数

Question

更新

如果您尝试此链接上的表单http://jsfiddle.net/Matt_KP/BwmzQ/ 小提琴并选择右上角的 40 英镑单选按钮，然后在底部看到订单总额为 40 英镑。然后，如果您选择 75 英镑，订单总额将变为 75 英镑，但如果您返回并再次检查 40 英镑，则订单总额为 75 英镑 + 40 英镑，而选中的单选按钮应该仅为 40 英镑。

更新结束

我有一个单选按钮部分，如果选择了其他单选按钮，则只能检查某些单选按钮。因此，假设用户选择了一个单选按钮，但随后又选择了另一个单选按钮，则第一个单选按钮将变为未选中状态，因为他们不能同时选择这两个按钮。

我还在单选按钮中使用了一个名为data-price 的自定义属性，它保存了需要添加到一起的每个单选按钮的值。

问题是当用户选择一个单选按钮时，总数显示正常，但是如果用户选择了另一个单选按钮，它不能选择前一个单选按钮，它会将总数添加到前一个单选按钮上，它应该只添加单选已选中的按钮。这有点像缓存我认为的总数。

这是我用来合计选中的单选按钮的：

<script type="text/javascript">
jQuery(document).ready(function($){
$('input:radio').change(function(){
var total = 0.0;
$('input:radio:checked').each(function(){
      total += parseFloat($(this).data('price'));
});
$('#total').val(total.toFixed(2));
});

})
</script>

Answer 1

我认为你的大部分问题都可以通过一些新的 HTML 来解决....

你的 crazy jQuery 代码来限制输入是荒谬的.. 你有名称、价值和你的数据价格属性...分割每个收音机设置项目对我来说似乎有点矫枉过正..

这是一个有限的例子（根据我们在聊天中的讨论）。

http://jsfiddle.net/CZpnD/

要看的主要事情是我如何为每个“块”选项使用相同的单选名称，以及当单个选项更改以获得新的总数时我如何循环所有选项（不是最有效的，但它作品）。

为了皮特的爱，请使用标签！

Answer 2

HTML 就是为此而构建的。

<form name="myform">
    <input type="radio" name="foo" value="10" /> foo 
    <input type="radio" name="foo" value="30" /> bar 
</form>

如果您为单选按钮指定相同的名称，则只能选择一个。

更进一步，当您获得单选元素时，.value 属性表示当前选中的单选按钮的值

var myform = document.forms.myform;

var radio = myform.elements.foo;
var price = radio.value;

请注意，radio 是 RadioNodeList，仅由 elements[name] 返回

Example

但事实证明，浏览器对 RadioNodeList 的支持令人震惊，因此您必须手动完成。或使用RadioNodeList polyfill

for (var i = 0, len = radio.length; i < len; i++) {
    var el = radio[i];
    if (el.checked) {
        var price = el.value;
        break;
    }
}