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

How to assign a different name for each radio input group

本文关键字：分配 输入 无线电      更新时间：2023-09-26

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

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

代码片段将通过 .ssi 输入，所以我不能只对输入名称进行硬编码。我需要一个JavaScript/jQuery方法，随着更多目的地的添加而动态更改它。默认值为"目标"。我希望每个单选按钮组都是"目的地 1"、"目的地 2"等。

这是一个非常淡化的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 初学者，所以如果我的流程、术语或代码有点偏差，请原谅我。

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

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

js小提琴示例

更新：我刚刚注意到您选择的所有元素都重复了名称和 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++;
})

js小提琴示例

您需要

分组更改它们（当前分组在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值只存储一个元素）。

相关文章：