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

Question

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

我想要的是:对于每个组 - radio 名称必须与其相关的组 ID 名称匹配

• group1 包含三个具有名称属性 group1
的单选按钮
• group2 包含三个具有 name 属性的单选按钮 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);
});

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