Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Filtrar lista

Referente ao curso JavaScript: programando na linguagem da web

por Rogério de Araújo Bezerra
| 116.8k xp | 31 posts

Olá, pessoal. Gostaria de ajuda dos universitários... kkk

Estou, ainda, engatinhando na área da programação e não encontrei em nenhum material na internet ou videoaulas com um forma de filtrar e classificar uma lista qualquer e monta-la novamente apenas com os itens selecionados ( CheckBox ) em ordem alfabética, conforme abaixo:

Exemplo: Tenho uma lista não classificada com alguns Estados e desejo montar uma nova lista em ordem alfabética, a partir do clique no botão "Montar Lista", apenas com os Estados selecionados:

UF's

  • Acre
  • Goiás
  • Maranhão
  • Rio de Janeiro
  • Distrito Federal
  • São Paulo
  • Bahia
  • Pará

Digamos que selecionei com um checkbox o GO, RJ, DF, BA... Gostaria que após o clique no botão "Montar Lista" fosse recarregada a página com apenas esses estados, ficando assim:

UF's

  • Bahia
  • Distrito Federal
  • Goiás
  • Rio de Janeiro

Alguém poderia criar um código html/javascript com essa solução? Brigadão.

4 respostas
por THIAGO TREVISAN ANGELICO
| 667.5k xp | 912 posts

Bom dia!

Crie seus checkbox, adicione uma classe neles (class="estados") em cada um. Seu botão chama uma função que verificará os checkbox marcados.

Para percorrer os checkbox, use document.querySelector('.estados').

Verifique quem está ou não marcado adicione em uma lista.

Depois, de um sort() na lista. Ex.:

var frutas = ['Maça','Pera','Banana','Amora']; 
frutas.sort(); 
RESULTADO = ["Amora", "Banana", "Maça", "Pera"];

Bons estudos!

por Rogério de Araújo Bezerra
| 116.8k xp | 31 posts

Olá, Thiago! Obrigado pelo retorno.

Entendi o que vc falou sobre como resolver minha dúvida, mas acontece que não tenho conhecimento sólido o suficiente para implantá-la.

Abaixo, comecei a escrever o código, mas não consegui passar disso... Até consigo buscar todos os estados do checkbox e mostrar no console do navegador, mas não consigo criar o código para buscar só os selecionados!E além de não conhecer a sintaxe do método sort() para classificar a lista, ainda apresenta uma mensagem de erro no console a respeito do value, dentro do trecho console.log(estados[i].value) no filtrar.js.

Se alguém conseguir finalizar esse código para mim, ficarei muito agradecido.

index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Lista UF</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>

    <body>        
        <h2>Meus Estados</h2>

        <p><b>Selecione os seus estados preferidos!</b></p>

    <div>
        <input type="checkbox" class="estados" id="acre" name="estado" value="AC">
        <label for="acre">Acre</label><br>

        <input type="checkbox" class="estados" id="goias" name="estado" value="GO">
        <label for="goias">Goiás</label><br>

        <input type="checkbox" class="estados" id="maranhao" name="estado" value="MA">
        <label for="maranhao">Maranhão</label><br>

        <input type="checkbox" class="estados" id="df" name="estado" value="DF">
        <label for="df">Distrito Federal</label><br>

        <input type="checkbox" class="estados" id="rj" name="estado" value="RJ">
        <label for="rj">Rio de Janeiro</label><br> 

        <input type="checkbox" class="estados" id="sp" name="estado" value="SP">
        <label for="sp">São Paulo</label><br> 

        <input type="checkbox" class="estados" id="bahia" name="estado" value="BA">
        <label for="bahia">Bahia</label><br> 

        <input type="checkbox" class="estados" id="para" name="estado" value="PA">
        <label for="para">Pará</label><br> 

        <p>Obs: Quero selecionar GO, RJ, DF, BA e classificar em ordem alfabética em uma nova página ou em uma área da página atual!</p><br> 

<button id="montar-lista" class="btnMontarLista">Montar Lista</button>
    </div>    

    <script src="js/filtrar.js"></script>

    </body>
</html>

filtrar.js

    var montarLista = document.querySelector("#montar-lista");

    montarLista.addEventListener("click", function (){
        event.preventDefault();

        var estados = document.querySelectorAll(".estados");
            for (var i = 0; i <= estados.length; i++) {
                console.log(estados[i].value);
            }    
        console.log('Botão Montar Lista clicado');
    });

index.css

body{
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

div p{
    color: red;
    margin: .8em;
    margin-bottom: -1em;
}

label{
    color: #555;
    display: inline-block;
    margin-bottom: .2em;
}

button{
    padding: .7em 2em;
    border: 0;
    border-bottom: 3px solid darkblue;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: 3px;
    color: #fff;
    background-color: blue;
    margin: 10px 10px;
}
solução!
por THIAGO TREVISAN ANGELICO
| 667.5k xp | 912 posts

Boa tarde!

No seu botão, troque para:

<button id="montar-lista" class="btnMontarLista" onclick="atualizar()">Montar Lista</button>

No seu javascript adicione a seguinte função:

function atualizar(){
    var array = [];
    var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
    for (var i = 0; i < checkboxes.length; i++){
      array.push(checkboxes[i].value)

    console.log(array.sort());
}
por Rogério de Araújo Bezerra
| 116.8k xp | 31 posts

Boa noite, Thiago.

Cara, muito obrigado. Com sua ajuda consegui implementar o código que desejava, e fui além... Criei uma li para apresentar cada um dos estados selecionados e um button para dar um reload() na página após a montagem da nova lista. Esses dois itens escondidos por meio da classe invisivel. com css.

Segue abaixo o código para servir de base para mais algum colega que esteja querendo implementar algo parecido.

Forte abraço e vamos estudar!

index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Lista UF</title>
        <link rel="stylesheet" type="text/css" href="css/index.css">
    </head>

    <body>        
        <h2>Meus Estados</h2>

        <p><b>Selecione os seus estados preferidos?</b></p>

    <div>
        <input type="checkbox" class="estados" id="acre" name="estado" value="AC">
        <label for="acre">Acre</label><br>

        <input type="checkbox" class="estados" id="goias" name="estado" value="GO">
        <label for="goias">Goiás</label><br>

        <input type="checkbox" class="estados" id="maranhao" name="estado" value="MA">
        <label for="maranhao">Maranhão</label><br>

        <input type="checkbox" class="estados" id="df" name="estado" value="DF">
        <label for="df">Distrito Federal</label><br>

        <input type="checkbox" class="estados" id="rj" name="estado" value="RJ">
        <label for="rj">Rio de Janeiro</label><br> 

        <input type="checkbox" class="estados" id="sp" name="estado" value="SP">
        <label for="sp">São Paulo</label><br> 

        <input type="checkbox" class="estados" id="bahia" name="estado" value="BA">
        <label for="bahia">Bahia</label><br> 

        <input type="checkbox" class="estados" id="para" name="estado" value="PA">
        <label for="para">Pará</label><br> 

        <button id="montar-lista" class="btnMontarLista">Montar Lista</button>
    </div>    

    <ul id="lista-montada" class="invisivel">
        <li></li>
        <li></li>
        <li></li>
    </ul>

       <button id="limpar-lista" class="invisivel">Limpar lista</button>


    <script src="js/filtro.js"></script>

    </body>
</html>

filtro.js

    var montarLista = document.querySelector("#montar-lista");
    var limparLista = document.querySelector("#limpar-lista");

    montarLista.addEventListener("click", function (){
         var array = [];
        var checkboxes = document.querySelectorAll('input[type=checkbox]:checked')
        for (var i = 0; i < checkboxes.length; i++){
            array.push(checkboxes[i].value)
            array.sort();
        }

             var ul = document.querySelector("#lista-montada");
             var btn = document.querySelector('#limpar-lista');
             ul.innerHTML = "";

            for (let i = 0; i < array.length; i++) {
                var li = document.createElement("li");
                li.textContent = array[i];
                ul.appendChild(li);
                console.log(array[i]);
             }
         ul.classList.remove("invisivel");
         btn.classList.remove("invisivel");
    });

    limparLista.addEventListener("click", function(){
        console.log("fui clicado");
        location.reload(); 
    });

index.css

body{
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

label{
    color: #555;
    display: inline-block;
    margin-bottom: .2em;
}

button{
    padding: .7em 2em;
    border: 0;
    border-bottom: 3px solid darkblue;
    font-size: 1.2em;
    cursor: pointer;
    margin: 0;
    margin-top: 3px;
    color: #fff;
    background-color: blue;
    margin: 10px 10px;
}

.invisivel{
    display: none;
}