单选按钮不适用于 jquery 中继器
Radio button not working with jquery repeater
我有以下用于转发器字段的代码。除单选按钮外,转发器字段中的所有输入字段均有效。
<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 复制项目并使用 class 索引获取它们,例如:
var repeater = doucument.getElementsByClassName('class-name');
并开始使用
repeater[index];
我测试了下面的代码link:
https://www.jqueryscript.net/form/Form-Fields-Repeater.html
每一行都是唯一的 ID
、lablefor
& name
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>
JS
$(document).ready(function () {
'use strict';
window.id = 0;
$('.repeater').repeater(
{
defaultValues: {
'id': window.id,
},
show: function () {
$(this).slideDown();
console.log($(this).find('input')[1]);
$('#cat-id').val(window.id);
},
hide: function (deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
window.id--;
$('#cat-id').val(window.id);
$(this).slideUp(deleteElement);
console.log($('.repeater').repeaterVal());
}
},
ready: function (setIndexes) {
}
}
);
});
将自定义收音机与 bootstrap 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>
<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 复制项目并使用 class 索引获取它们,例如:
var repeater = doucument.getElementsByClassName('class-name');
并开始使用
repeater[index];
我测试了下面的代码link: https://www.jqueryscript.net/form/Form-Fields-Repeater.html
每一行都是唯一的 ID
、lablefor
& name
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>
JS
$(document).ready(function () {
'use strict';
window.id = 0;
$('.repeater').repeater(
{
defaultValues: {
'id': window.id,
},
show: function () {
$(this).slideDown();
console.log($(this).find('input')[1]);
$('#cat-id').val(window.id);
},
hide: function (deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
window.id--;
$('#cat-id').val(window.id);
$(this).slideUp(deleteElement);
console.log($('.repeater').repeaterVal());
}
},
ready: function (setIndexes) {
}
}
);
});
将自定义收音机与 bootstrap 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>