Jquery looping and incrementing

Question

I have 3 input types :

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

I have a jquery script that is triggered on a click and append 3 input type like the following, the script just keeps adding the trio of inputs, as much as needed by the user:

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

There is also a delete button that deletes the 3 inputs.

I'm looking for a way that on each clicks, Jquery loops though all the checkboxes and rename the "name" attribute so it's never missing a number. Because right now i'm having a problem that when the user deletes inputs I have some names like :

check[0], check[3]

missing :

check[1] and check [2]

So is there a way to loop on each click and reset all the names to be from 1 to number of trio inputs I have ?

Thanks

Easiest way is just name those checkbox like `check[]`. NO NEED to specify any index. — thecodeparadox, Sep 10 '15 at 22:41
it would be helpful if you add your code as well. or create a jsfiddle — Rice Junkie, Sep 10 '15 at 22:43
problem is I can't remove the index, I'll need on the server side and if I remove the index then I can't select the radio of the "second" set of 3 inputs — francoboy7, Sep 10 '15 at 22:49

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

Just remove index from checkbox names. use

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

and you're OK.

DEMO

Also see

According to comment, to re-assign new index you can do something like below on after each delete and new add:

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

DEMO

edited May 23 '17 at 10:26

Community

1
1

answered Sep 10 '15 at 22:44

thecodeparadox

86,271
21
138
164

problem is I can't remove the index, I'll need on the server side and if I remove the index then I can't select the radio of the "second" set of 3 inputs – francoboy7 Sep 10 '15 at 22:49
Hi CodeParadox, first of all thank for your time. what can I do if I really need them to have an index ? My php script need to be able to differentiate them, but at the same time they need to have the same name – francoboy7 Sep 10 '15 at 23:00

score 0 · Answer 2 · answered Sep 10 '15 at 23:02

Every delete you can iterate the checkboxes and renumber them. Check the DEMO below

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>

Jquery looping and incrementing

2 Answers2