-2

quero clicar numa carinha e deixar apenas ela, caso clico em outra desmarcar a atual e deixar a nova marcada

<style>
        .img1{border:4px solid #c2c2c2;
           filter: grayscale(60%) !important;
           border-radius:100px;
          -moz-border-radius:100px;
         -webkit-border-radius:100px;}
 </style>

<ul class="list-form">
            <li>
                    <label for="icone_minsastifeito">
                                <span class="textos">Muito Insatisfeito</span>
                                <img src="{{url()}}/img/icone1.png" onclick="addEfeito1()" id="img1" alt="icone muito insastifeito" class="imagens" style="max-width: 100%;">
                                <input type="radio" name="satisfacao" value="1" id="icone_minsastifeito"/>
                                <span>1</span>
                    </label>   
                    <label for="icone-pinsatisfeito">
                        <span class="textos">Pouco Insatisfeito</span>
                        <img src="{{url()}}/img/icone2.png" onclick="addEfeito2()" id="img2" alt="icone pouco insastifeito" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="2" id="icone-pinsatisfeito">
                        <span>2</span>
                    </label>

                    <label for="neutro">
                        <span class="textos">Neutro</span>
                        <img src="{{url()}}/img/icone3.png" onclick="addEfeito3()" id="img3" alt="icone neutro" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="3" id="neutro">
                        <span>3</span>
                    </label>

                    <label for="psatisfeito">
                            <span class="textos">Pouco Satisfeito</span>
                            <img src="{{url()}}/img/icone4.png" onclick="addEfeito4()" id="img4" alt="icone pouco sastifeito" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="4" id="psatisfeito">
                        <span>4</span>
                    </label>

                    <label for="msatisfeito">
                        <span class="textos">Muito Satisfeito</span>    
                        <img src="{{url()}}/img/icone5.png" onclick="addEfeito5()" id="img5" alt="icone muito sastifeito" class="imagens" style="max-width: 100%;">
                        <input type="radio" name="satisfacao" value="5" id="msatisfeito">
                        <span>5</span>
                    </label>
            </li>
        </ul>

<script>
        function addEfeito1(){ document.querySelector("#img1").className = 'img1';}
        function addEfeito2(){ document.querySelector("#img2").className = 'img1';}
        function addEfeito3(){ document.querySelector("#img3").className = 'img1';}
        function addEfeito4(){ document.querySelector("#img4").className = 'img1';}
        function addEfeito5(){ document.querySelector("#img5").className = 'img1';}
    </script> 
3

1 Resposta 1

-1

A logica seria mais ou menos essa, antes de marcar o que foi clicado, desmarca todos, simples e rápido.

function uncheckItems (item) {
  item.forEach(element => {
    element.style.color = "#000000"
  })
}

document.querySelectorAll('li').forEach(element => {
  element.addEventListener('click', () => {
    uncheckItems(document.querySelectorAll('li'))   
    element.style.color = "#FF0000"
  })
})
ul {
  display: flex;
}

li {
  list-style: none;
  border: 1px solid;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
  width: 20%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

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