javascript - 如何为每个 radio 输入组分配不同的名称

Question

我正在寻找一种解决方案来动态更改一组输入单选按钮的名称。

我正在创建一个 travel itinerary其中用户选择“国内”或“国际”。该选择将隐藏/显示下面相应的州/国家/地区下拉列表。可能有多个目的地，因此，我需要多个州/国家选择器。我遇到的问题是所有输入都具有相同的名称，因此在任何给定时间只有一个按钮会显示为“已选中”。

代码片段将通过 .ssi 进入，因此我不能只对输入名称进行硬编码。我需要一个 JavaScript/jQuery 方法来随着添加更多目的地而动态更改它。默认为“目的地”。我希望每个单选按钮组的名称为“destination1”、“destination2”等。

这是 HTML 的一个非常淡化的版本(不是在寻找关于基于表格的布局的辩论。我的团队已经对此进行了讨论):

<table>
  <tbody>
    <tr>
      <td colspan="2">
        <input type="radio" checked="checked" name="destination" class="js-trigger" data-destination="stateForm"> Domestic
        <input type="radio" name="destination" class="js-trigger" data-destination="countryForm"> International
      </td>
    </tr>
    <tr>
      <td>Destination:</td>
      <td>
        <form class="stateForm list">
          <select name="State" id="state-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
            <option value="Select State" selected="selected"></option>
            <option value="Alabama" data-alternative-spellings="AL">Alabama</option>
            <option value="Alaska" data-alternative-spellings="AK">Alaska</option>
            <option value="Etc" data-alternative-spellings="Etc">Etc</option>
          </select>
        </form><!-- End State Form -->
        <form class="countryForm list">
          <select name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
            <option value="Select Country" selected="selected"></option>
            <option value="Afghanistan" data-alternative-spellings="AF افغانستان">Afghanistan</option>
            <option value="Åland Islands" data-alternative-spellings="AX Aaland Aland" data-relevancy-booster="0.5">Åland Islands</option>
            <option value="Etc" data-alternative-spellings="Etc">Etc</option>
          </select>
        </form><!-- End Country Form -->
      </td>
    </tr>
  </tbody>
</table>

这是我的 fiddle :http://jsfiddle.net/Currell/9sr5rkjy/2/

我是一个 JavaScript 初学者，所以如果我的流程、术语或代码有点不对劲，请原谅我。

Answer 1

您可以通过添加以下内容来重新命名它们:

var counter = 0;
$('table').each(function(){
    $(this).find('input[type=radio]').attr('name','destination'+counter);
    counter++;
})

<强> jsFiddle example

更新:我刚刚注意到您的所有选择元素都重复名称和 ID 属性。要解决此问题，您可以将代码更改为:

var counter = 0;
$('table').each(function () {
    $(this).find('input[type=radio]').attr('name', 'destination' + counter);
    $(this).find('select').eq(0).attr({
        'name': 'State' + counter,
            'id': 'state-selector' + counter
    });
    $(this).find('select').eq(1).attr({
        'name': 'Country' + counter,
            'id': 'country-selector' + counter
    });
    counter++;
})

<强> jsFiddle example