2

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.

Minha listagem

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>

1 Resposta 1

2

Fiz umas mudanças para adicionar a funcionalidade que procuras.

Dentro do font adicionei um span assim:

<font color="#808080">Oranges <span></span></font>

dessa manerira tens onde colocar o numero que queres.

Depois mudei o JavaScript para adicionar elementos à array, e não os seus valores. Dessa maneira fica mais fácil iterá-los e procurar o span correspondente via checkObj.nextSibling.querySelector('span')

O código ficaria assim:

function addToList(checkObj, outputObjID) {
    //Remove do array caso o elemento já esteja inserido
    if (listCheckedOptions.indexOf(checkObj) >= 0) {
        listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj), 1);
    } else {
        if (listCheckedOptions.length >= 2) {
            alert("Máx 2 Elemenos selecionados");
            return checkObj.checked = false;
        }
        listCheckedOptions.push(checkObj);
    }

    document.getElementById(outputObjID).value = ""; //Limpa o textarea
    document.getElementById(outputObjID).value = listCheckedOptions.map(function (o) {
        return o.value;
    }).join('\r\n'); //Adiciona no textarea
    if (!checkObj.checked) checkObj.nextSibling.querySelector('span').innerHTML = '';
    listCheckedOptions.forEach(function (el, i) {
        var span = el.nextSibling.querySelector('span').innerHTML = i + 1;
    });

    return;
}

jsFiddle: http://jsfiddle.net/dsy0amLf/

1
  • 1
    Muito obrigada pela ajuda.
    – Striffer
    Commented 31/07/2015 às 14:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .