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

时间:2017-06-18 08:12:17

标签: javascript jquery html input radio

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

$('.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代码以在更改输入名称后保持无线电输入检查值。

1 个答案:

答案 0 :(得分:0)

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

<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/