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>

そしてそれからの結果の出力：

ここに画像の説明を入力してください

チェックされたチェックボックスをサーブレットに送信したいのですが、注文ユーザーにこれらのチェックボックスを選択してもらいたいのです。

たとえば、ユーザーAは次のようなことを行います：チーズを選択、バターを選択、ミルクを選択->次に、チーズ、バター、ミルクがこの順序でサーブレットに送信されます。

ユーザーBが次のようなことを行う場合：チーズを選択、バターを選択、バターの選択を解除、ミルクを選択、バターを選択->次に、チーズ、ミルク、バターがこの順序でサーブレットに送信されます。

感謝。

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

順序を追跡するためのグローバル変数を作成します。

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 に答える
1

ここで、これを試してみてください。

これは、すべてのオプションの値の配列と、それらがクリックされた順序を維持します。クリックされた順序の増加するインデックスを任意に割り当てることにより、ページの読み込み時にアイテムがすでにチェックされている場合を処理します。

選択されていないアイテムを処理します。また、私が行った方法の幸せな副作用として、もう少し情報を提供することもできます。たとえば、選択順序として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>
于 2012-10-29T06:49:57.720 に答える