-2

Possuo o input no html

<input value ="Get" onClick={GetSelected} type="checkbox" value="SLA contratual" />

ao ser clicado é adicionado um span em uma lista

<li id="teste"></li>

Preciso remover se clicado novamente no input, porém não estou conseguindo. Segue o script

function GetSelected() {
        var selected = new Array();
        var p = document.getElementById("teste");
        var portfolio = document.getElementById("section");
        var chks = portfolio.getElementsByTagName("INPUT");
        var span = document.createElement("span");

        for (var i =  0; i < chks.length; i++ ) {
            if (chks[i].checked) {
                selected.push(chks[i].value);
            }
        };

        if (selected.length > 0) {
            console.log("Você selecionou: " + selected.join(", "));
            span.innerHTML = selected.join(", "); 
            p.appendChild(span);
        }

    };

2
  • É só um input checkbox ou são vários?
    – Sam
    2/04/2020 às 17:49
  • são vários, cada um dentro de uma lista 2/04/2020 às 17:51

2 Respostas 2

2

Olá,

caso não seja necessário adicionar em um array, você adicionar diretamente na lista e excluir pelo id do elemento conforme exemplo abaixo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input class="chbSelect" name="options" type="radio" value="Option 1" id="database_id_1">Option 1</input></br>
    <input class="chbSelect" name="options" type="radio" value="Option 2" id="database_id_2">Option 2</input></br>
    <input class="chbSelect" name="options" type="radio" value="Option 3" id="database_id_3">Option 3</input></br>

    <ul id="my-list">
    <ul>

    <script>
        $('.chbSelect').on('click', () => GetSelected() );

        function GetSelected() {
            $('#my-list li').remove();
            if (event.target.checked) {
                let $i = document.createElement('li');
                $i.id = 'li_' + event.target.id;
                $i.appendChild(document.createTextNode(event.target.value));
                document.querySelector('#my-list').appendChild($i);
            }
        }
    </script>
</body>
</html>

5
  • Funcionou perfeitamente, muito obrigado. Só uma dúvida, caso queira limitar a apenas selecionar um checkbox, como iria ficar? 2/04/2020 às 18:32
  • Em vez de checkbox você pode trocar para radio e então todos tem que ter o a mesma tag "name", com isso, o próprio componente não permitirá ao usuário selecionar mais de um. outra coisa que pode ser feito é colocar a linha $('#my-list li').remove(); no método GetSelected, na primeira linha, aí pode arrancar o else do if fora.. Mas se você só vai apresentar um valor, é necessário usar uma lista? Outra coisa, se só pode selecionar um valor, o checkbox ou radio não pode ser substituído por um select (combobox)? Se ficar com dúvida me avise que eu eu ajusto o código para você entender. 2/04/2020 às 19:27
  • Testei com o radio porém quando selecionado e clicando novamente ele é adicionado na lista. O combobox não se aplica pq são categorias diferentes onde o usuário poderá escolher. 3/04/2020 às 12:53
  • Olá, eu editei o código da resposta, por favor verifique se é isso que você precisa. 3/04/2020 às 15:53
  • Como uso react o ideal seria javascript ao invés de jquery, mas na primeira tentativa modifiquei e funcionou, porém com a edição não consegui fazer funcionar o código 3/04/2020 às 17:40
0

Não sei se entendi bem, mas se você quer inserir e remover um span numa li de acordo com os checkboxes marcados, bastaria usar um else no if dentro do for e usar .removeChild().

Ao percorrer a lista de checkboxes e o que não estiver marcado, o value não entra na array e é removido o span da lista que possua o mesmo índice.

Agora, veja que você colocou dois values no checkbox: value="Get" e value="SLA contratual". O primeiro será ignorado.

No último if me parece que você só deveria inserir o span caso o checkbox esteja marcado. Em vez de if (selected.length > 0) você usaria if (e.checked).

Veja como ficaria o código:

function GetSelected(e) {
   var selected = new Array();
   var p = document.getElementById("teste");
   var portfolio = document.getElementById("section");
   var chks = portfolio.getElementsByTagName("INPUT");
   var span = document.createElement("span");

   for (var i =  0; i < chks.length; i++ ) {
      if (chks[i].checked) {
         selected.push(chks[i].value);
      }else if(p.childNodes[i]){
         p.removeChild(p.childNodes[i]);
      }
   };

   console.log("Você selecionou: " + selected.join(", "));
   if (e.checked) {
      span.innerHTML = selected.join(", "); 
      p.appendChild(span);
   }

};
span{
   display: inline-block;
   background: yellow;
   margin: 2px;
}
<div id="section">
   <input onClick="GetSelected(this)" type="checkbox" value="SLA contratual" />
   <input onClick="GetSelected(this)" type="checkbox" value="Outra coisa" />
</div>
<ul>
   <li id="teste"></li>
</ul>

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 .