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来规避......

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

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

http://jsfiddle.net/CZpnD/＆lt; - 这是您可以使用的示例..

要看的主要内容是我如何为每个＆＃34;块＆＃34;使用相同的无线电名称。选项，以及当一个选项被更改为获得新的总数时，我如何循环遍历所有选项（不是最有效但工作正常）。

并且喜欢皮特使用标签！

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;
    }
}

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

2 个答案: