Question

看看这个HTML示例：

<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.jsp" method="POST">
<div align="center"><br>
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
</div>
</form>
</body>
</html>

由此产生的结果：

enter image description here

我希望将 已检查 复选框发送到servlet，但我还希望获得订单用户选中了这些复选框。

例如，用户A执行以下操作： 选择奶酪，选择奶油，选择牛奶 - >然后 奶酪，黄油，牛奶< / em> 将通过此订单发送到servlet 。

如果用户B执行以下操作： 选择奶酪，选择黄油，取消选择黄油，选择牛奶，选择黄油 - >然后奶酪，牛奶，黄油将通过此订单发送到servlet 。

欣赏。

Answer 1

选中小提琴，找到复选框顺序here

我使用了以下 JS代码

checkedOrder = []
inputList = document.getElementsByTagName('input')
for(var i=0;i<inputList.length;i++) {
    if(inputList[i].type === 'checkbox') {
        inputList[i].onclick = function() {
            if (this.checked) {
                 checkedOrder.push(this.value)            
            } else {
                 checkedOrder.splice(checkedOrder.indexOf(this.value),1) 
            }
            console.log(checkedOrder)
        }    
    }
}

Answer 2

创建一个全局变量来跟踪顺序：

var selectOrder = 0;

将此功能绑定到输入中的onclick事件：

function onClickHandler() {
    var senderId = this.id;

    selectOrder = selectOrder + 1;
    document.getElementById(senderId).setAttribute('data-order', selectOrder);
}

这将根据检查的顺序在每个属性上设置data- *（自定义）属性。因此，当您提交表单时，您可以获取所有复选框并通过.getAttribute('data-order'); 不要忘记获取订单，以便在您提交时重置selectOrder = 0，下次重新排序。

Answer 3

试试这段代码。这样做效果更好

    <html>
<head>
<title>My Page</title>
<script type="text/javascript">
var arr=new Array();
function fnc(myid)
{

    if(document.getElementById(myid).checked == true)
    {
        arr.push(document.getElementById(myid).value);
        alert(arr);
    }
    else
    {
        var item1=document.getElementById(myid).value;
        for(i=0;i<2;i++)
        {
            if(arr[i]=item1)
            {
                found=i;
            arr.splice(found,1);
            }
        }
    }

}
</script>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.jsp" method="POST">
<div align="center"><br>
<input type="checkbox" name="option1" value="Milk" id="Milk" onchange="fnc(this.id)"> Milk<br>
<input type="checkbox" name="option2" value="Butter" id="Butter" onchange="fnc(this.id)"> Butter<br>
<input type="checkbox" name="option3" value="Cheese" id="Cheese" onchange="fnc(this.id)"> Cheese<br>
<br>
</div>
</form>
</body>
</html>

Answer 4

在这里，试一试。

它维护一个包含所有选项值的数组，以及它们被单击的顺序。它处理页面加载时已经检查过项目的情况，通过任意为它们点击的顺序分配一个增加的索引。

它处理未被选中的项目，它还可以为您提供更多信息，作为我完成它的方式的愉快副作用。例如，您可以为选择顺序返回值2,3,4。如果我加载页面，然后在取消选择然后重新选择黄油之前选择牛奶然后奶酪，我回到值 ~~2,3,4~~ 2,4,3 - 我可以马上告诉最后的选择是黄油，它以前是第一个被选中的项目。可能没用，但对我来说也是一个有趣的结果。

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<style>
#myDiv
{
    border: 1px solid black;
    display: inline-block;
}
</style>
<script>
window.addEventListener('load', mInit, false);
function mInit()
{
    var i, inputList = document.getElementsByTagName('input'), n = inputList.length;
    var cbCount = 0;
    var curOrder = 0;

    for (i=0; i<n; i++)
    {
        if (inputList[i].type == 'checkbox')
        {
            cbCount++;
            var cur = inputList[i];
            cur.addEventListener('change', onCbChange, false);
            var mObj = {val:cur.value, selOrder:0};
            if (cur.checked)
            {
                mObj.selOrder = ++curOrder;
            }
            availOptions.push( mObj );
        }
    }
}

var availOptions = [];  // an array to hold objects - { val, selOrder }

function getItem(value)
{
    var i, n = availOptions.length;
    for (i=0; i<n; i++)
    {
        if (availOptions[i].val == value)
            return availOptions[i];
    }
    return null;
}

// just clear it's selOrder member
function mUnselect(value)
{
    var Item = getItem(value);
    Item.selOrder = 0;
}

// iterate through the list, find the highest value of selOrder, increment it and set this item's selOrder to that
function mSelect(value)
{
    var i, n = availOptions.length;
    var curMax=0;
    for (i=0; i<n; i++)
    {
        if (availOptions[i].selOrder > curMax)
            curMax = availOptions[i].selOrder;
    }
    curMax++;
    getItem(value).selOrder = curMax;
}

function onCbChange()
{
    if (this.checked)
        mSelect(this.value);
    else
        mUnselect(this.value);
    alert(this.value + ': ' + this.checked);
}

function showCurState()
{
    var i, n=availOptions.length;
    var mStr = '';
    for (i=0; i<n; i++)
        mStr += availOptions[i].val + ", selOrder: " + availOptions[i].selOrder + "\n"
    alert(mStr);
}

</script>


</head>
<body>
<div id='myDiv' align="left">
<br>
<input type="checkbox" name="option1" value="Milk"> Milk<br>
<input type="checkbox" name="option2" value="Butter" checked> Butter<br>
<input type="checkbox" name="option3" value="Cheese"> Cheese<br>
<br>
<input type='button' onclick='showCurState();' value='Show state'/>
</div>
</body>
</html>

如何记录多个复选框的选择顺序？

4 个答案: