Question

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

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

代码段将通过.ssi进入，因此我无法对输入名称进行硬编码。我需要一个javascript / jQuery方法，在添加更多目的地时动态更改它。默认值是＆＃34;目的地。＆＃34;我希望它是＆＃34; destination1，＆＃34; ＆＃34; DESTINATION2，＆＃34;等每个单选按钮组。

这是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>

这是我的小提琴：http://jsfiddle.net/Currell/9sr5rkjy/2/

我是一个javascript noob，所以请原谅我，如果我的流程，术语，特别是我的代码有点偏。

感谢您花时间寻找和/或帮忙！

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

Answer 2

您需要在组中更改它们（目前在TD中分组）：

$("td:has(':radio')").each(function(index){
    var $radio = $(this).find(':radio');
    $radio.attr("name", $radio.attr('name') + index);
});

JSFiddle： http://jsfiddle.net/TrueBlueAussie/9sr5rkjy/5/

这会将每个集重命名为name="destination0"，name="destination1"等。

您也有重复的ID字段，这是无效的HTML，因此您需要对这些字段应用类似的修复程序。 jQuery和Javascript只能找到ID的第一个出现，因为浏览器使用快速查找字典（每个ID值只存储一个元素）。

如何为每个无线电输入组分配不同的名称

2 个答案: