Question

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

我试图制作一个只有在点击了正确的复选框序列才能查看的页面，这是一种巧妙的方式，只允许那些在我网站的某个部分有复选框序列的人。

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

示例：复选框从20开始编号为1。如果他们选择checkbox1，checkbox4，checkbox2，checkbox7等，Id就像要按照确认的顺序传递的数据，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

我是一个noobie，我把各种各样的来源拼凑到一起。

我无法理解如何从第二个javascript片段中获取数组数据，并将其传递到我需要创建的php页面，它将回显它以便测试它是否确实传递了变量按照它们被点击的确切顺序。

任何帮助都将不胜感激。

Answer 1

只需将复选框的ID推送到数组，然后将其转换为字符串并将其发回。 Array [0]将是第一个，如果是Array.length＆gt; 7，禁用阵列中不的其他复选框。这应该很简单。

Answer 2

有一个非常similar question here要求检测所选复选框顺序的方法。

Full code in jsFiddle

选择/取消选中该复选框，然后单击textarea以查看您的阵列。

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

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

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

2 个答案: