添加已检查的单选按钮总数

Question

UPDATE

如果您尝试在此链接上的表格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来规避....

你疯狂的 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]返回

例

然而事实证明，对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;
    }
}