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

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 的第二个片段中获取数组数据，并将其传递到我需要创建的 php 页面，该页面将回显它，以便测试它是否确实传递了他们被点击的确切顺序。

任何帮助将不胜感激。

Answer 1

这里有一个非常类似的问题，要求找到一种检测顺序的方法选定的复选框。

jsFiddle 中的完整代码

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

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

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

Answer 2

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