0

看看这个 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>

以及由此产生的输出：

在此处输入图像描述

我希望将选中的复选框发送到 servlet，但我也想让订单用户选中这些复选框。

例如，用户 A 执行以下操作：选择 Cheese,select Butter, select Milk -> 然后Cheese,Butter,Milk将按此顺序发送到 servlet 。

如果用户 B 执行以下操作：选择 Cheese，选择 Butter，取消选择 Butter，选择 Milk，选择 Butter -> 那么Cheese,Milk,Butter将按此顺序发送到 servlet 。

欣赏。

4

4 回答 4

2

在此处检查复选框顺序的小提琴

我使用了以下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)
        }    
    }
}

​</p>

于 2012-10-29T06:21:46.317 回答
1

来，试试这个。

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

它处理未选择的项目，它还可以为您提供更多信息，作为我完成它的方式的快乐副作用。例如，您可以获取选择顺序的 2、3、4 值。如果我加载页面，然后在取消选择然后重新选择 Butter 之前选择 Milk，然后选择 Cheese，我会返回值2,3,4 2,4,3 - 我可以立即看出最后选择的是 Butter，并且它有以前是第一个选择的项目。可能没用，但对我来说仍然是一个有趣的结果。

<!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>
于 2012-10-29T06:49:57.720 回答
1

创建一个全局变量来跟踪订单：

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以便下次重新排序。

于 2012-10-29T06:01:35.777 回答
1

试试这个代码。这样效果更好

    <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>
于 2012-10-29T06:07:35.057 回答