检测单击复选框的顺序

时间:2010-10-02 17:08:36

标签: javascript jquery checkbox

我正在尝试创建一个页面,允许用户从总共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的页面,我需要做什么来实际解析数据。

我将不胜感激任何帮助

1 个答案:

答案 0 :(得分:2)

  • 使用订单
  • 创建隐藏的输入字段
  • 在更改内容时更新此输入字段
  • 您将准备好由PHP处理订单