更改无线电输入名称 - 已选中消失无线电

Question

我有一个关于通过框顺序更改名称属性的输入号的问题。当我更改第一个框中的输入名称时，带有无线电输入的第二个框将丢失其选中的值。

$('.container').find('.box').each(function (idx) {
            $(this).find('input').each(function () {
                let field = $(this);
                let fieldName = field.attr('name');
                let mIndex = 0;
                if (fieldName.length !== 0) {
                    field.attr('name', fieldName.replace(
                      /[d+]/g, 
                      function (match, pos, original) {
                          return mIndex++ === 0 ? '[' + idx + ']' : match;
                      }));
                    field.attr('id', field.attr('name').replace(/[[]]/g, '#').replace(/#+/g, '-').replace(/[-]+$/g, ''));
                    field.closest('.field').children('label').attr('for', field.attr('id'))
                }
            });

这是我的代码示例：https://jsfiddle.net/pbLkabhe/

我的问题是如何修复 Javascript 代码以在更改输入名称后保持无线电输入检查值。

Answer 1

所有无线电都被视为相同的无线电组，因为它们具有相同的名称(方形背板不会使它们成为单独的组(。这意味着只会检查其中的 1 个。我已经更改了第二组单选按钮的名称，所以现在两个单选机都检查了正确的单选按钮。

<label>
  <input id="box-0-radio" name="hello[0][radio]" type="radio" value="0" checked="checked">        
  Option 3
 </label>
 <label>
   <input id="box-0-radio" name="hello[0][radio]" type="radio" value="1">
    Option 4
 </label>

https://jsfiddle.net/pbLkabhe/1/