收音机不同的名字 - 只检查一个

Question

我在基于xtcommerce的解决方法中使用了许多单选按钮.这些radiobuttons是动态创建的,并为每个组赋予不同的名称,如下所示:

<input type="radio" name="id[1]" value="40">
<input type="radio" name="id[1]" value="30">
<input type="radio" name="id[1]" value="20">
<input type="radio" name="id[1]" value="10">
<input type="radio" name="id[2]" value="40">
<input type="radio" name="id[2]" value="30">
<input type="radio" name="id[2]" value="20">
<input type="radio" name="id[2]" value="10">
<input type="radio" name="id[3]" value="10">
....

现在我想将这些无线电按钮"组合"在一起,这样我一次只能选择一个无线电按钮.现在默认每个"组"的每一个第一单选按钮(名称="ID [1]",名字="ID [2]"等)被预选和各无线电按钮的每一个值被提交.

我在stackoverflow上发现这个脚本只选择一个单选按钮:

$(document).ready(function () {
  $('input[type=radio]').prop('checked', false);
  $('input[type=radio]:first').prop('checked', true)

  $('input[type=radio]').click(function (event) {
    $('input[type=radio]').prop('checked', false);
    $(this).prop('checked', true);

    event.preventDefault();
  });
});

这是一个小提琴:

http://jsfiddle.net/3xD7V/1/

这项工作到目前为止,我只能在我的页面上选择一个单选按钮.但是你可以在我的js-fiddle中看到一个问题:

http://jsfiddle.net/ksZxV/

第一组的第一个单选按钮被预选 - 没关系.但是如果您选择同一组的另一个单选按钮,则选择 - "标记"不会改变.只有当您单击另一组的单选按钮时,才会选择所选的单选按钮(在FF中找到另一个错误(编辑:和Opera以及IE9),如果我选择任何其他单选按钮,则不会显示选择标记;在Chrome中,它会通过选择另一个组来更改).如果您留在同一组中,则选择也不会更改.

在我的本地安装上,我有一个动态变化的更新程序,它说明所选项目的新价格(抱歉,我无法将其实现为小提琴).到目前为止,即使我选择了同一组的另一个单选按钮,价格也会更新,但如前所述,选择 - "标记"不会改变...

对这个问题有什么想法吗？

Answer 1

您无需取消选中所有单选按钮,然后重新检查当前按钮.取消选中先前选中的按钮就足够了.

作为这种简化的副作用,您的错误也是固定的.

$(document).ready(function () {
    $('input[type=radio]').change(function() {
        // When any radio button on the page is selected,
        // then deselect all other radio buttons.
        $('input[type=radio]:checked').not(this).prop('checked', false);
    });
});?