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

Question

我在 SAME FORM 中使用了一个重复的表单域。我将输入表单字段命名为数组，例如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>

标签： jqueryhtml

Answer 1

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

请注意，您应该只clone()使用第一组，而不是全部，并且还使用 abutton来触发添加新元素。我将收音机包装在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>