Gostaria de saber como posso complementar o código abaixo para funcionar da seguinte forma necessito que ao marcar qualquer item na checkbox coloque no caso um numero indicando a ordem de sua marcação com o numero aparecendo na frente do texto que se encontra ao lado da checkbox de forma que caso eu des marque qualquer item a numeração se auto ajuste.
Uma vez que eu estou usando campo oculto minha lista não mostra no caso a ordem em que os itens estão sendo adicionados, somente mostra os itens selecionados.
Por esse motivo para não me confundir gostaria de saber se e possível fazer aparecer o números no inicio do texto indicando a ordem de suas marcações, segue abaixo a imagem da minha lista atual juntamente com o código original.
Código original
<html>
<head>
<title>Seleção de Itens</title>
<script type="text/javascript">
var listCheckedOptions = [];
function addToList(checkObj, outputObjID){
//Remove do array caso o elemento já esteja inserido
if (listCheckedOptions.indexOf(checkObj.value) >= 0) {
listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj.value), 1);
}else{
if(listCheckedOptions.length >= 2){
alert("Máx 2 Elemenos selecionados");
checkObj.checked = "";
return;
}
listCheckedOptions.push(checkObj.value);
}
document.getElementById(outputObjID).value = ""; //Limpa o textarea
document.getElementById(outputObjID).value = listCheckedOptions.join('\r\n'); //Adiciona no textarea
return;
}
</script>
</head>
<body>
<form name="myform">
<input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges</font><br>
<input type="checkbox" name="fruit[]" value="Apples" onClick="addToList(this, 'txt1')"><font color="#808080">Apples</font><br>
<input type="checkbox" name="fruit[]" value="Grapes" onClick="addToList(this, 'txt1')"><font color="#808080">Grapes</font><br>
<textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080" readonly></textarea>
</form>
</body>
</html>