javascript - 检测复选框被点击的顺序

Question

我正在尝试制作一个允许用户从总共 25 个复选框中选择 8 个复选框的页面。

我想知道，如何检测他们检查它们的确切顺序。我正在使用一个普通的 html 主页，它将通过指向 php 页面的表单操作进行验证。

我试图为八个复选框获取类似(checkbox1、checkbox2、checkbox6、checkbox3、checkbox7 等)的结果，以及它们被点击的确切顺序。

我想我已经找到了我要找的东西，我不太确定，但我在实现它时遇到了困难。

这就是我目前所拥有的，我想我的问题是，一旦用户提交了表单，我需要什么类型的 php 来收集这些信息。

对于我的表格:

<form id="form1" name="form1" method="post" action="check_combination.php">
    <label id="lblA1"></label> 
    <input name="checkbox1" type="checkbox" value="a1" onclick="setChecks(this)"/> Option 1 
    <label id="lblA2"></label> 
    <input name="checkbox1" type="checkbox" value="a2" onclick="setChecks(this)"/> Option 2 
    <label id="lblA3"></label> 
    <input name="checkbox1" type="checkbox" value="a3" onclick="setChecks(this)"/> Option 3 
    <label id="lblA4"></label> 
    <input name="checkbox1" type="checkbox" value="a4" onclick="setChecks(this)"/> Option 4
</form>

对于我拥有的 Javascript:

<script type="text/javascript">
<!--
//initial checkCount of zero
var checkCount=0

//maximum number of allowed checked boxes
var maxChecks=8

function setChecks(obj){
//increment/decrement checkCount
if(obj.checked){
checkCount=checkCount+1
}else{
checkCount=checkCount-1
}
//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert
if (checkCount>maxChecks){
obj.checked=false
checkCount=checkCount-1
alert('you may only choose up to '+maxChecks+' options')
}
}
//-->
</script>

<script type="text/javascript">
<!--
$(document).ready(function () { 
    var array = []; 
    $('input[name="checkbox1"]').click(function () { 
        if ($(this).attr('checked')) { 
            // Add the new element if checked: 
            array.push($(this).attr('value')); 
        } 
        else { 
            // Remove the element if unchecked: 
            for (var i = 0; i < array.length; i++) { 
                if (array[i] == $(this).attr('value')) { 
                    array.splice(i, 1); 
                } 
            } 
        } 
        // Clear all labels: 
        $("label").each(function (i, elem) { 
            $(elem).html(""); 
        }); 
        // Check the array and update labels. 
        for (var i = 0; i < array.length; i++) { 
            if (i == 0) { 
                $("#lbl" + array[i].toUpperCase()).html("first"); 
            } 
            if (i == 1) { 
                $("#lbl" + array[i].toUpperCase()).html("second"); 
            } 
        } 
    }); 
});
//-->
</script>

我得到了只允许选中 8 个复选框的部分，但我仍然不知道在将数据提交到名为 check_combination.php 的页面后我需要做些什么来实际解析数据。

如果有任何帮助，我将不胜感激

Answer 1

• 创建一个包含订单的隐藏输入字段
• 当事情发生变化时更新这个输入字段
• 您将准备好由 PHP 处理的订单