如何将复选框数组从表单传递到结果页面

Question

我正在尝试构建一个页面，该页面将允许用户在单个表单上按特定顺序最多选择 20 个复选框中的 8 个。

我正在尝试制作一个只有在单击正确的复选框序列时才能查看的页面，这是一种仅让那些具有复选框序列的人进入我网站的某个部分的巧妙方法。

我需要知道的是，一旦他们选择了复选框，我如何才能不仅将其传递到测试页面以查看数据，而且如何传递数据以显示如何传递的确切顺序复选框已选中。

示例：复选框从二十开始编号。如果他们选择 checkbox1、checkbox4、checkbox2、checkbox7 等，我希望数据按照检查的确切顺序传递，1、4、2、7 等

到目前为止，我已经完成了表单，我想知道我需要添加到 javascript 中以完全按照检查的方式传递变量。

这里是 Javascript：

<script type="text/javascript">
<!--

//initial checkCount of zero 
var checkCount=0

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

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="checkbox"]').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) { 
                $("#" + array[i].toUpperCase()).html("1"); 
            } 
            if (i == 1) { 
                $("#" + array[i].toUpperCase()).html("2"); 
            }
            if (i == 2) { 
                $("#" + array[i].toUpperCase()).html("3"); 
            } 
            if (i == 3) { 
                $("#" + array[i].toUpperCase()).html("4"); 
            } 
            if (i == 4) { 
                $("#" + array[i].toUpperCase()).html("5"); 
            } 
            if (i == 5) { 
                $("#" + array[i].toUpperCase()).html("6"); 
            } 
            if (i == 6) { 
                $("#" + array[i].toUpperCase()).html("7"); 
            } 
            if (i == 7) { 
                $("#" + array[i].toUpperCase()).html("8"); 
            }  
        } 
    }); 
});
//-->
</script>

以下是输入字段的示例：

    <td width="20" align="center" valign="middle"><label id="1"></label><input name="checkbox" type="checkbox" value="1" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="2"></label><input name="checkbox" type="checkbox" value="2" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="3"></label><input name="checkbox" type="checkbox" value="3" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="4"></label><input name="checkbox" type="checkbox" value="4" onclick="setChecks(this)"/></td>
    <td width="20" align="center" valign="middle"><label id="5"></label><input name="checkbox" type="checkbox" value="5" onclick="setChecks(this)"/></td>

and so on up to 20

我是个菜鸟，我从各种来源拼凑出我迄今为止所拥有的一切。

我无法理解如何从 javascript 的第二个 sn-p 中获取数组数据，并将其传递给我需要创建的 php 页面，该页面将回显它以测试它是否确实通过了沿着变量被点击的确切顺序。

任何帮助将不胜感激。

Answer 1

有一个非常similar question here 要求提供一种方法来检测选中复选框的顺序。

Full code in jsFiddle

选择/取消选中复选框，然后单击文本区域以查看您的数组。

当用户选择一个复选框时，我所做的只是在数组上添加新元素。如果他取消选择，它将通过其值找到索引并从数组中删除。

然后你可以使用arrayName.length查看长度，如果符合你的条件就可以提交了。

Answer 2

只需将复选框的 ID 推送到一个数组上，然后将其转换为字符串并返回。 Array[0] 将是第一个，依此类推。如果 Array.length > 7，则禁用数组中 not 的其他复选框。这应该很简单。