更改收音机输入名称 - 检查消失收音机

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/