0

Como posso alterar o script abaixo para funcionar da seguinte forma preciso que ele realize o seguinte limite o número de marcações o seja podendo selecionar no max 2 itens da lista caso ultrapasse do valor maximo permitido de uma mensagem de alerta.

<html>
  <head>
    <title>Seleção de Itens</title>
    <script type="text/javascript">
      //Array que guarda a ordem em que os elementos foram inseridos
      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 { //Adiciona casojá esteja inserido
          listCheckedOptions.push(checkObj.value);
        }

//        alert(listCheckedOptions); //debug para verificar os elementos inseridos
        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>

2 Respostas 2

2

Para checar quantos elementos há em um array basta usar array.length

Dentro do else onde você adiciona o elemento no array, poderia fazer algo do tipo:

if(listCheckedOptions.length >= 2){
    alert("Máx 2 Elemenos selecionados"); 
    checkObj.checked = "";
    return;
}

Exp:

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;
}
<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>

Edit

Adicionei a funcionalidade mencionada pelo @read para de-selecionar o elemento quando a quantidade de elementos for superior à determinada.

4
  • Era isso mesmo que eu queria grato pela ajuda dos dois.
    – Striffer
    29/07/2015 às 21:46
  • Só um complemento como eu posso no caso tipo ao marcar o item na checkbox fazer aparecer um numero em ordem de marcação pois no caso ao invés de textarea estarei usando campo oculto tem como fazer números aparecerem nos item da checkbox ao marcalos aparecer a posições em que eles foram marcados caso de selecione o segundo tome a posição do primeiro e assim por diante ?
    – Striffer
    31/07/2015 às 13:02
  • Quando for assim @Rodrigo, você pode e deve criar uma nova pergunta, porque essa nova dúvida foge muito do contexto da pergunta original, não há nenhum problema nesse caso 31/07/2015 às 13:17
  • Grato pela resposta estarei a fazer então uma nova pergunta com o código obtido desta resposta.
    – Striffer
    31/07/2015 às 13:20
1

Podes acrescentar checkObj.checked = false; à resposta do Marcelo Bonifazio. Para impedir de ser escolhido mais um elemento.

A função ficaria:

var listCheckedOptions = [];

function addToList(checkObj, outputObjID){
  if(listCheckedOptions.length >= 2){
    alert("Máx 2 Elemenos selecionados"); 
    checkObj.checked = false;
    return;
  }
  //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"); return;}
    listCheckedOptions.push(checkObj.value);
  }

  document.getElementById(outputObjID).value = ""; //Limpa o textarea
  document.getElementById(outputObjID).value = listCheckedOptions.join('\r\n'); //Adiciona no textarea

  return;
}

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 .