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>

在这种形式中如何获得php数组中checkboxe的选择顺序

如果我在点击 x4＆gt;后提交了表单x2＆gt; x3＆gt; X1

我希望在数组中按顺序排序复选框[x4，x2，x3，x1]

我得到的正常数组是订购复选框[x1，x2，x3，x4] 。

Answer 1

使用jquery检查点击的订单

将value推送到更改事件的数组。如果选中则推送到数组。未经检查value从数组中删除

使用,加入数组，将值添加到隐藏输入。您可以将此值发布到服务器

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>

<强>更新

根据点击顺序更改标签值

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

你需要写一个像这样的jquery函数：

为所有复选框添加公共类，例如class =“ckbox” 然后，

$(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 );
        }
    });
});

然后将此JS变量发布到您的PHP代码中。它将按顺序提供您选择的所有值。

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

2 个答案: