checkbox with ordered selection array for php - 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>

Answer 2

You need to write a jquery function like this:
Add a common class to all checkboxes like class="ckbox"
then,
$(document).ready(function(){
var selected_boxes = [];
$('.ckbox').change(function() {
if($(this).is(':checked')) {
selected_boxes.push($(this).val());
$(this).prev().attr('for',$(this).val());
}
else{ // When uncheck the checkbox.
selected_boxes.splice( $.inArray($(this).val(), selected_boxes), 1 );
}
});
});
Then post this JS variable to your php code. It will give all the values in sequence in which you had selected.