复选框与PHP的有序选择数组

Question

<form method='post' action=''>
 <label for="x1">X1</label>
 <input id="x1" name="checkbox[]" type="checkbox" value="x1" />

 <label for="x2">X2</label>
 <input id="x2" name="checkbox[]" type="checkbox" value="x2" />

 <label for="x3">X3</label>
 <input id="x3" name="checkbox[]" type="checkbox" value="x3" />

 <label for="x4">X4</label>
 <input id="x4" name="checkbox[]" type="checkbox" value="x4" />

 <button type='submit' name='submit'>Submit</button>
</form>

In this form How can i get the selection order of the checkboxes inside the php array

Just if i submitted the form after clicking x4 > x2 > x3 > x1

i want to get ordered in the array as it is selected checkbox[x4, x2, x3, x1]

The normal array i get is as it is ordered checkbox[x1, x2, x3, x4].

Answer 1

Check the clicked order using jquery

push the value to array on change event.if is checked push to the array.is unchecked value remove from array

Join the array with , add the value to hidden input .you could post this value to server

var arr=[]
$('input[type=checkbox]').on('change', function() {
  if ($(this).is(':checked')) {
    arr.push($(this).val())
  } else {
    var r =arr.indexOf($(this).val())
    arr.splice(r, 1)
}
$('input[type=hidden]').val(arr.join(',')) //for  server use
console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action=''>
  <label for="x1">X1</label>
  <input id="x1" name="checkbox[]" type="checkbox" value="x1" />

  <label for="x2">X2</label>
  <input id="x2" name="checkbox[]" type="checkbox" value="x2" />

  <label for="x3">X3</label>
  <input id="x3" name="checkbox[]" type="checkbox" value="x3" />

  <label for="x4">X4</label>
  <input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<input type="hidden" name="clickedorder" >
  <button type='submit' name='submit'>Submit</button>
</form>

Updated

change the label value depend on clicking order

var arr=[]
$('input[type=checkbox]').on('change', function() {
  if ($(this).is(':checked')) {
    arr.push($(this).val())
  } else {
    var r =arr.indexOf($(this).val())
    arr.splice(r, 1)
}
$('input[type=checkbox]').each(function(a){
//console.log(arr.indexOf($(this).val()))
  if(arr.indexOf($(this).val())>-1){
     $(this).prev('label').text($(this).val().toUpperCase()+'-'+(arr.indexOf($(this).val())+1))
  }else{
    $(this).prev('label').text($(this).val().toUpperCase())
  }
})
$('input[type=hidden]').val(arr.join(',')) //for  server use

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method='post' action=''>
  <label for="x1">X1</label>
  <input id="x1" name="checkbox[]" type="checkbox" value="x1" />

  <label for="x2">X2</label>
  <input id="x2" name="checkbox[]" type="checkbox" value="x2" />

  <label for="x3">X3</label>
  <input id="x3" name="checkbox[]" type="checkbox" value="x3" />

  <label for="x4">X4</label>
  <input id="x4" name="checkbox[]" type="checkbox" value="x4" />
<input type="hidden" name="clickedorder" >
  <button type='submit' name='submit'>Submit</button>
</form>

</div>