javascript - 制作名称不同的单选按钮，就像它们在一个组中一样

Question

我有一个动态生成的表单 - 其中有多个字段集及其自己的元素。其中有一个单选按钮。这是一个简化的代码片段:

    <form name="ePIC" method="post" action="test.php">
        <fieldset>
            <input type="radio" name="pic[1]" />
        </fieldset>
        <fieldset>
            <input type="radio" name="pic[2]" />
        </fieldset>
        <input type="submit" name="submit" value="test" />
    </form>

基本上，字段集中是图片，单选按钮用于选择相册的封面图片。

一切都运行良好，除了以下事实:由于单选按钮的命名不同，它们不会作为一个组运行 - 这意味着可以一次选择多个单选按钮。

谁能告诉我如何使单选按钮作为一个组，可能使用 javascript/jQuery？

我开始尝试按类别管理按钮 - 但在单击一个单选按钮时如何影响所有其他单选按钮的过程中迷失了方向。

Answer 1

此 jQuery 代码将删除所有单选按钮名称的 [n] 部分，因此具有相同名称前缀的所有按钮将被分组在一起。

$(":radio").attr('name', function(i, name) {
    $(this).data('orig-name', name);
    return name.replace(/\[.*\]/, '');
});

使用此submit处理程序在提交表单时放回带有索引的原始名称。

$("form").submit(function() {
    $(this).find(':radio').attr('name', function() {
        return $(this).data('orig-name');
    });
});