Jquery循环和递增答案

【问题标题】：Jquery looping and incrementingJquery循环和递增
【发布时间】：2015-09-10 22:39:39
【问题描述】：

我有 3 种输入类型：

<input type="checkbox" name="check[0]" value="randomval">
<input type="checkbox" name="check[0]" value="randomval">
<input type="checkbox" name="check[0]" value="randomval">

我有一个 jquery 脚本，它在单击时触发并附加 3 个输入类型，如下所示，该脚本只是根据用户的需要不断添加三个输入：

<input type="checkbox" name="check[1]" value="randomval">
<input type="checkbox" name="check[1]" value="randomval">
<input type="checkbox" name="check[1]" value="randomval">

还有一个删除按钮，用于删除 3 个输入。

我正在寻找一种方法，在每次点击时，Jquery 都会遍历所有复选框并重命名“名称”属性，这样它就不会丢失数字。因为现在我遇到了一个问题，当用户删除输入时，我有一些名称，例如：

check[0], check[3]

缺少：

check[1] and check [2]

那么有没有办法在每次点击时循环并将所有名称重置为从 1 到我拥有的三重奏输入数？

谢谢

【问题讨论】：

最简单的方法就是将这些复选框命名为check[]。无需指定任何索引。
如果您也添加代码会很有帮助。或创建一个 jsfiddle
问题是我无法删除索引，我需要在服务器端，如果我删除索引，那么我无法选择“第二”组 3 个输入的收音机

标签： javascript jquery loops

【解决方案1】：

只需从复选框名称中删除索引。使用

<input type="checkbox" name="check[]" value="randomval">

你没事。

DEMO

另见

根据评论，要重新分配新索引，您可以在每次删除和新添加后执行以下操作：

function reIndex() {
    var inputs = $('input[name^=check]');
    inputs.each(function (i, el) {
        this.name = 'check[' + (i+1) + ']';
    });
}

DEMO

【讨论】：

问题是我无法删除索引，我需要在服务器端，如果我删除索引，那么我无法选择“第二”组 3 个输入的收音机
您好 CodeParadox，首先感谢您抽出宝贵时间。如果我真的需要他们有一个索引，我该怎么办？我的 php 脚本需要能够区分它们，但同时它们需要具有相同的名称

【解决方案2】：

每次删除都可以迭代复选框并重新编号。查看下面的DEMO

function deleteGroup(node){
  $(node).closest('.pool').remove();
  var counter = 0, arrayIndex = -1, itemCount = 3;
  $('#all input[type=checkbox]').each(function(){
    ++arrayIndex;
    if((arrayIndex)%itemCount==0){++counter;}
    $(this).prop('name','check['+counter+']');
  })
}

function add(){
  var idx = ($('#all .pool:last input[type=checkbox]').prop('name').substring(6,7))*1 + 1;
  $('#all').append('<div class=pool>'
    +'<input type="checkbox" name="check['+idx+']" value="randomval">'
    +'<input type="checkbox" name="check['+idx+']" value="randomval">'
    +'<input type="checkbox" name="check['+idx+']" value="randomval">'
    +'<button onclick="deleteGroup(this)" >Remove</button>'
  +'</div>');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="all">
  <div class=pool>
    <input type="checkbox" name="check[0]" value="randomval">
    <input type="checkbox" name="check[0]" value="randomval">
    <input type="checkbox" name="check[0]" value="randomval">
    <button onclick="deleteGroup(this)" >Remove</button>
  </div>

  <div class=pool>
    <input type="checkbox" name="check[1]" value="randomval">
    <input type="checkbox" name="check[1]" value="randomval">
    <input type="checkbox" name="check[1]" value="randomval">
    <button onclick="deleteGroup(this)" >Remove</button>
  </div>

</div>

<button onclick="add()" >Add</button>

【讨论】：