Repeater是一个用于创建可重复表单组的jQuery插件，它允许用户在表单中复制和删除一组可重复的字段。

它适用于您希望用户创建和管理他们经常使用的数据集（例如，常旅客号码、信用卡号码），或添加他们将来在其他表单上重复需要的新数据集的情况。

如何使用它:

1.在jQuery之后下载并包含中继器插件的缩小版。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.repeater.min.js"></script>

2.使用以下内容创建可重复的表单组数据属性：

• 数据转发器列表：用于重写字段名称
• 数据中继器项目：将所有可重复的表单字段放置在此容器中
• 数据中继器删除：删除按钮
• 数据中继器创建：“复制”按钮

<form action="#" class="repeater" enctype="multipart/form-data">
  <div data-repeater-list="group-a">
    <div data-repeater-item>
      <input type="text" name="text-input" value="A"/>
      <textarea name="textarea-input">A</textarea>
      <input type="radio" name="radio-input" value="A" checked/>
      <input type="radio" name="radio-input" value="B"/>
      <input type="checkbox" name="checkbox-input" value="A" checked/>
      <input type="checkbox" name="checkbox-input" value="B"/>
      <select name="select-input">
        <option value="A" selected>A</option>
        <option value="B">B</option>
      </select>
      <select name="multiple-select-input" multiple>
        <option value="A" selected>A</option>
        <option value="B" selected>B</option>
      </select>
      <input data-repeater-delete type="button" value="Delete"/>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

3.初始化表单上的插件：

$('.repeater').repeater({
  // options and callbacks here
});

4.该插件还支持嵌套的表单字段：

<form action="#" class="outer-repeater">
  <div data-repeater-list="outer-group" class="outer">
    <div data-repeater-item class="outer">
      <input type="text" name="text-input" value="A" class="outer"/>
      <input data-repeater-delete type="button" value="Delete" class="outer"/>
      <div class="inner-repeater">
        <div data-repeater-list="inner-group" class="inner">
          <div data-repeater-item class="inner">
            <input type="text" name="inner-text-input" value="B" class="inner"/>
            <input data-repeater-delete type="button" value="Delete" class="inner"/>
          </div>
        </div>
        <input data-repeater-create type="button" value="Add" class="inner"/>
      </div>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add" class="outer"/>
</form>

$('.outer-repeater').repeater({
  repeaters: [{
    selector: '.inner-repeater',
  }]
});

5.设置重复字段的默认值：

$('.repeater').repeater({
  defaultValues: {
    'textarea-input': 'foo',
    'text-input': 'bar',
    'select-input': 'B',
    'checkbox-input': ['A', 'B'],
    'radio-input': 'B'
  },
});

6.确定是否允许删除表单中的第一个组。默认值：“false”。

$('.repeater').repeater({
  isFirstItemUndeletable: true,
});

7.确定是否生成空表单。默认值：“false”。

<form action="#" class="repeater" enctype="multipart/form-data">
  <div data-repeater-list="group-a">
    <div data-repeater-item style="display:none">
      <input type="text" name="text-input" value="A"/>
      <textarea name="textarea-input">A</textarea>
      <input type="radio" name="radio-input" value="A" checked/>
      <input type="radio" name="radio-input" value="B"/>
      <input type="checkbox" name="checkbox-input" value="A" checked/>
      <input type="checkbox" name="checkbox-input" value="B"/>
      <select name="select-input">
        <option value="A" selected>A</option>
        <option value="B">B</option>
      </select>
      <select name="multiple-select-input" multiple>
        <option value="A" selected>A</option>
        <option value="B" selected>B</option>
      </select>
      <input data-repeater-delete type="button" value="Delete"/>
    </div>
  </div>
  <input data-repeater-create type="button" value="Add"/>
</form>

$('.outer-repeater').repeater({
  initEmpty: true,
});

8.回调函数。

$('.outer-repeater').repeater({
  show: function () {
    $(this).slideDown();
  },
  hide: function (deleteElement) {
    if(confirm('Are you sure you want to delete this element?')) {
      $(this).slideUp(deleteElement);
    }
  },
  ready: function (setIndexes) {
  }
});

9.获取表单字段的值。

$('.repeater').repeaterVal();

预览截图

创建可重复 表单组 jQuery Repeater