单选按钮不适用于jquery中继器

我为中继器字段提供了以下代码。中继器字段中的所有输入字段（单选按钮除外）都在工作

<div data-repeater-item>
    <ul>
        <li>
            <div class="form-check form-check-inline">
                <div class="custom-radio">
                    <input class="form-check-input" type="radio" name="period_type" id="inlineRadio7" value="Month">
                    <label class="form-check-label" for="inlineRadio7">Month</label>
                </div>
            </div>
            <div class="form-check form-check-inline">
                <div class="custom-radio">
                    <input class="form-check-input" type="radio" name="period_type" id="inlineRadio8" value="Day">
                    <label class="form-check-label" for="inlineRadio8">Day</label>
                </div>
            </div>
        </li>
        <li>
            <input type="number" class="form-control" name="period" placeholder="00">
            <label class="form-check-label">Month</label>
        </li>
        <li>
            <label class="form-check-label">Default price
                <!--per Month--></label>
            <input type="number" class="form-control" name="default_price" placeholder="00,000">
        </li>
        <li>
            <label class="form-check-label">Discounted price
                <!--per Month--></label>
            <input type="number" class="form-control" name="discount_price" placeholder="00,000">
        </li>
        <li class="add-remove">
            <input class="remove" data-repeater-delete type="button" value="- Remove" />
        </li>
    </ul>
</div>   

月
白天


月


违约价格


折扣价

单击第二个或以下单选按钮组的单选按钮时，第一个单选按钮组正在更改（因为我认为我为单选输入提供了id）。如何使单选按钮也起作用？

---

任何帮助都将不胜感激

您为单选按钮指定了相同的名称，因此它们作为单个组工作，因此每当您单击其中一个按钮时，另一个按钮将被取消选中

您需要为不同行中的单选按钮指定不同的名称才能独立工作

<!--- First row -->
    <div class="form-check form-check-inline">
        <div class="custom-radio">
           <input class="form-check-input" type="radio" 
                  name="period_type_7" id="inlineRadio7" value="Month">
           <label class="form-check-label" for="inlineRadio7">Month</label>
        </div>
    </div>
    <div class="form-check form-check-inline">
         <div class="custom-radio">
            <input class="form-check-input" type="radio" 
                   name="period_type_7" id="inlineRadio8" value="Day">
            <label class="form-check-label" for="inlineRadio8">Day</label>
         </div>
    </div>

   <!--- Second row -->
<div class="form-check form-check-inline">
        <div class="custom-radio">
           <input class="form-check-input" type="radio" 
                  name="period_type_9" id="inlineRadio9" value="Month">
           <label class="form-check-label" for="inlineRadio9">Month</label>
        </div>
    </div>
    <div class="form-check form-check-inline">
         <div class="custom-radio">
            <input class="form-check-input" type="radio" 
                   name="period_type_9" id="inlineRadio10" value="Day">
            <label class="form-check-label" for="inlineRadio10">Day</label>
         </div>
    </div>

月
白天
月
白天

您可以使用jquery复制项，并使用类索引获取它们，如：

var repeater = doucument.getElementsByClassName('class-name');

并开始使用

repeater[index]; 

我已在以下链接中测试了代码：

---

每一行都是唯一的

ID

，

标签

和

名称

val

    <div class="repeater">
    <div data-repeater-list="category-group">
        <div data-repeater-item>
            <input type="hidden" name="id" id="cat-id" />
            <ul>
                <li>
                    <div class="form-check form-check-inline">
                        <div class="custom-radio">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="period_type" id="inlineRadio7" value="Month">
                                Month
                            </label>
                        </div>
                    </div>
                    <div class="form-check form-check-inline">
                        <div class="custom-radio">
                            <label class="form-check-label">
                                <input class="form-check-input" type="radio" name="period_type" id="inlineRadio8" value="Day">
                                Day
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <input type="number" class="form-control" name="period" placeholder="00">
                    <label class="form-check-label">Month</label>
                </li>
                <li>
                    <label class="form-check-label">
                        Default price
                        <!--per Month-->
                    </label>
                    <input type="number" class="form-control" name="default_price" placeholder="00,000">
                </li>
                <li>
                    <label class="form-check-label">
                        Discounted price
                        <!--per Month-->
                    </label>
                    <input type="number" class="form-control" name="discount_price" placeholder="00,000">
                </li>
                <li class="add-remove">
                    <input class="remove" data-repeater-delete type="button" value="- Remove" />
                </li>
            </ul>
        </div>

    </div>
    <input data-repeater-create type="button" value="Add" />
</div>

将自定义收音机与引导HTML一起使用

<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Or toggle this other custom radio</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Toggle this custom radio</span>
</label>

或切换此其他自定义收音机
切换此自定义收音机

---

我不介意第一个选项（月）被取消选中，当我们单击day时，但问题是当单击此单选按钮中继器的第二行时，只有初始按钮（第一行）被取消选中在这种情况下，同一行中单选按钮的名称相同，但不同行的名称不同检查第二行

id

和

labelfor

valEach中继器行应具有唯一的

id

，label

for=“id”

和

name

则月日比率按钮将起作用。是，jquery repeater会自动为名称属性设置唯一名称（通过使用数组格式），但我不确定如何处理id问题更新我的答案-检查此url可以很好地定义您想要的所有内容。感谢您的回答，但我使用的jquery repeater会动态添加每一行，因此，我无法控制将每个单选按钮的中继器字段设置为不同的id。而且我只有一个div表示感谢，这个答案似乎使用默认单选按钮工作，但我使用的是自定义单选按钮（）类似的东西。还有什么解决方法吗？我已经用boostrapSorry添加了自定义单选按钮HTML，你能描述一下repeater[索引]，我应该在哪里使用它？这仅用于演示目的，以防您需要获取元素的选定单选按钮使用索引的值。事实上，getElementsByClassName获取所有带有类名的单选按钮。

<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Or toggle this other custom radio</span>
</label>
<label class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <span class="custom-control-label">Toggle this custom radio</span>
</label>