更改收音機輸入名稱 - 檢查消失收音機

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/