動態生成的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);
});

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

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