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

Question

我有两个单选按钮组，每组包含三个选项，我已动态添加组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>

Answer 1

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

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

＆＃13;

＆＃13;

//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)
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

据我所知你的意思是这个 - 你希望输入内部包装器遵循命名规则。正确吗？

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

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

Answer 3

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

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