如何在重复表单组中使用单选按钮

Question

我在同一表单中使用重复表单字段。我有我的输入表单字段命名为数组，例如first_name[]，gender[].

在这种情况下，当单击单选按钮时，它会影响其他重复表单组的单选按钮。

$('#repeatButton ').on('click', function() {
var repeater = $('#repeater .items').clone();
$('#repeater').append(repeater);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="repeater">
<div class="form-group items">
<input type="radio" value="male" name="gender[]"><label>Male</label>
<input type="radio" value="female" name="gender[]"><label>Female</label>
</div>
</div>
<input value="add" id="repeatButton">
</form>

Answer 1

复选框按name属性分组。因此，您需要使name在每个#repeater .items组中是唯一的。在您的情况下，最简单的方法是将时间戳附加到值。

请注意，您应该只clone()第一组，而不是所有组，并且还应该使用button来触发新元素的添加。我将无线电包装在label元素中，以允许用户也单击关联的文本。试试这个：

$('#repeatButton ').on('click', function() {
var $repeater = $('#repeater .items:first').clone();
var ts = (new Date()).getTime();
$repeater.find('input').attr('name', function(i, name) {
return ts + '_' + name;
});
$repeater.appendTo('#repeater');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="repeater">
<div class="form-group items">
<label>
<input type="radio" value="male" name="gender[]" />
Male
</label>
<label>
<input type="radio" value="female" name="gender[]" />
Female
</label>
</div>
</div>
<button type="button" id="repeatButton">Add</button>
</form>

Answer 2

你可以做这样的事情。

$('#repeatButton ').on('click', function() {
var repeater = $('#repeater .items:first').clone();
$('#repeater').append(repeater);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="repeater">
<div class="form-group items">
<input type="radio" value="male" name="gender[]"><label>Male</label>
<input type="radio" value="female" name="gender[]"><label>Female</label>
</div>
</div>
<input value="add" id="repeatButton">
</form>

Answer 3

$('#repeatButton ').on('click', function() {
var repeater = $('#repeater .items:first').html();
repeater = repeater+"<BR>"; 
$('#repeater').append(repeater);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="">
<div id="repeater">
<div class="form-group items">
<input type="radio" value="male" name="gender[]"><label>Male</label>
<input type="radio" value="female" name="gender[]"><label>Female</label>
</div>
</div>
<input value="add" id="repeatButton">
</form>