动态生成的 ID 需要是单选按钮名称作为属性答案

【问题标题】：dynamically generated ID's needs to be radio buttons name as attribute动态生成的 ID 需要是单选按钮名称作为属性
【发布时间】：2017-01-17 21:46:27
【问题描述】：

我有两个单选按钮组，每个组包含三个选项，并且我动态添加了组 ID。

我想要的是：对于每个组 - 电台名称必须与其相关的组 id 名称匹配

group1 包含三个具有名称属性 group1 的单选按钮
group2 包含三个具有名称属性 group2 的单选按钮

//this script is used to add groupid's
$('.wraper').each(function(i) {
  $(this).attr('id', "group" + (i + 1));
});

input[type=radio],
input[type=radio]+div {
  display: none;
}
input[type=radio]:checked+div {
  display: flex;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wraper">
  <div class="col-sm-12">
    <label class="checkedClass tabboxfor" for="a">a</label>
    <label class="tabboxfor" for="b">b</label>
    <label class="tabboxfor" for="c">c</label>
  </div>

  <div class="col-xs-12">
    <input type="radio" id="a" class="" checked="checked" />
    <div class="box">
      <p>a</p>
    </div>
    <input type="radio" id="b" class="" />
    <div class="box">
      <p>a</p>
    </div>
    <input type="radio" id="c" class="" />
    <div class="box">
      <p>c</p>
    </div>
  </div>
</div>


<div class="wraper">
  <div class="col-sm-12">
    <label class="checkedClass tabboxfor" for="x">x</label>
    <label class="tabboxfor" for="y">y</label>
    <label class="tabboxfor" for="z">z</label>
  </div>

  <div class="col-xs-12">
    <input type="radio" id="x" class="" checked="checked" />
    <div class="box">
      <p>xxx</p>
    </div>
    <input type="radio" id="y" class="" />
    <div class="box">
      <p>yyy</p>
    </div>
    <input type="radio" id="z" class="" />
    <div class="box">
      <p>zzz</p>
    </div>
  </div>
</div>

【问题讨论】：

请编辑代码以查看，我暂时添加了硬编码值，例如：(name="group1") 和 (name="group2")
所以你想要生成包装器的 ID 和无线电的名称
那么...你的问题是什么？
@Satpal，是的，你明白了，我已经添加了 groupid 的使用脚本。现在我希望收音机的名称相同
我已经编辑了问题，以免产生误导，并从收音机中删除了 id 和 name 属性，因为需要生成这些属性。

标签： javascript jquery

【解决方案1】：

使用.find() 定位:radio 元素以设置.attr()

$('.wraper').each(function(i) {
    var groupId = "group" + (i + 1);
    $(this).attr('id', groupId );
    $(this).find(':radio').attr('name', groupId);
});

//this script is used to add groupid's
$('.wraper').each(function(i) {
  $(this).attr('id', "group" + (i + 1));
  $(this).find(':radio').attr('name', this.id)
});

input[type=radio],
input[type=radio]+div {
  display: none;
}
input[type=radio]:checked+div {
  display: flex;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wraper" id="group1">
  <div class="col-sm-12">
    <label class="checkedClass tabboxfor" for="a">a</label>
    <label class="tabboxfor" for="b">b</label>
    <label class="tabboxfor" for="c">c</label>
  </div>

  <div class="col-xs-12">
    <input type="radio" id="a" class="" checked="checked" />
    <div class="box">
      <p>a</p>
    </div>
    <input type="radio" id="b" class="" />
    <div class="box">
      <p>a</p>
    </div>
    <input type="radio" id="c" class="" />
    <div class="box">
      <p>c</p>
    </div>
  </div>
</div>


<div class="wraper" id="group2">
  <div class="col-sm-12">
    <label class="checkedClass tabboxfor" for="x">x</label>
    <label class="tabboxfor" for="y">y</label>
    <label class="tabboxfor" for="z">z</label>
  </div>

  <div class="col-xs-12">
    <input type="radio" id="x" class="" checked="checked" />
    <div class="box">
      <p>xxx</p>
    </div>
    <input type="radio" id="y" class="" />
    <div class="box">
      <p>yyy</p>
    </div>
    <input type="radio" id="z" class="" />
    <div class="box">
      <p>zzz</p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

据我了解，您的意思是 - 您希望包装器内的输入遵循命名规则。正确吗？

$('.wraper').each(function(i) {
    var groupId = "group" + (i + 1);

    $(this).attr('id', groupId );
    $(this).find('input').attr('name', groupId );
});

【讨论】：

【解决方案3】：

如果我的理解是正确的，这就是你所期望的：

$('.wraper').each(function(i) { 
   $(this).attr('id', "group" + (i + 1));
     $(this).children("input"). each (function (){
       $(this).attr("name","group" + (I+1));
     });
 });

【讨论】：