2

O que eu quero fazer com o checkbox, é o mesmo que o radio faz usando o JavaScript.

Porque eu então simplesmente não uso o radio?

É porque se o radio aparecer marcado, não tem como eu deixá-lo desmarcado.

Sei que a lógica no JavaScript está certa, porque dá para ver pelo console.log, mas quando eu clico em outro input ele não desmarca o que está marcado.

var obj2 = "";
var box = document.querySelectorAll(".t");

box[0].addEventListener("click",selecionarGru);
box[1].addEventListener("click",selecionarGru);

function selecionarGru(){

  if(obj2 == "" || obj2 == this){
      if(obj2 == this){
        obj2.removeAttribute('checked');
        obj2 = "";
        return;
      }
      obj2 = this;
      obj2.setAttribute("checked","");
   }else{
      obj2.removeAttribute('checked');
      obj2 = this;
      obj2.setAttribute("checked","");
   }
}
#tudo1{
  background: green;
  width: 200px;
  height: 200px;
}
.t{
  width: 20px;
  height: 20px;
  margin: 30px 0 0 80px;
  background: red;
}
<div id="tudo1">
  <input type="checkbox" class="t">
  <input type="checkbox" class="t">
</div>

3
  • nao poderia criar mais um radio com opção nenhum?
    – Costamilam
    Commented 5/03/2018 às 19:45
  • Sim, seria mais facil tinha pensado nisso antes do seu comentario e ja to fazendo assim! porem esta dando merda do mesmo jeito. minha ideia usar o js para verificar se eu dei um segundo clique no mesmo radio sendo assim ele iria marcar um radio invisivel. porem eu coloco o atributo checked no radio invisivel e ele nao desmarca o visivel codepen.io/pedroviskks/pen/YYNBog
    – AKU
    Commented 5/03/2018 às 20:01
  • adiciona uma id em cada checkbox que voce deseja e faz o ciclo usando o checkbox e não o nome do campo pq voce não consegue puxar pelo this o outros elementos ao mesmo tempo só um deles Commented 5/03/2018 às 21:20

4 Respostas 4

2

Outra alternativa é a cada vez que clica num elemento desmarca todos os outros. Para isso pode utilizar filter para remover apenas o elemento que tem, e de seguida aplica checked = false nos que sobraram:

Exemplo:

const boxes = document.querySelectorAll(".t");
boxes.forEach(boxClick => boxClick.addEventListener("click",function(){
  [...boxes].filter(box => box != this).forEach(box => box.checked = false);
}));
#tudo1{
  background: green;
  width: 200px;
  height: 200px;
}
.t{
  width: 20px;
  height: 20px;
  margin: 30px 0 0 80px;
  background: red;
}
<div id="tudo1">
  <input type="checkbox" class="t">
  <input type="checkbox" class="t">
  <input type="checkbox" class="t">
</div>

Note que o querySelectorAll devolve um NodeList que não tem o método filter. Por esse motivo utilizei o spread operator que são os ... em :

[...boxes]

De forma a criar um array normal e poder utilizar filter, que filtrou retirando apenas a caixa que está a ser clicada:

filter(box => box != this)

E após retirada a caixa clicada apliquei checked = false aos restantes com:

forEach(box => box.checked = false)

Com esta solução pode ter quantas checkboxes quiser que irá funcionar como pretende, deixando sempre no máximo uma selecionada.

2

Você pode usar previousElementSibling e nextElementSibling para saber qual checkbox está clicando.

Ao clicar no primeiro checkbox, o previousElementSibling será null, logo fica fácil saber se o checkbox clicado foi o segundo, aí basta desmarcar o outro.

Veja:

var box = document.querySelectorAll(".t");

box[0].addEventListener("click",selecionarGru);
box[1].addEventListener("click",selecionarGru);

function selecionarGru(){

   var obj1 = this.previousElementSibling,
       obj2 = this.nextElementSibling;

   (obj1 || obj2).checked = false;

}
#tudo1{
  background: green;
  width: 200px;
  height: 200px;
}
.t{
  width: 20px;
  height: 20px;
  margin: 30px 0 0 80px;
  background: red;
}
<div id="tudo1">
  <input type="checkbox" class="t">
  <input type="checkbox" class="t">
</div>

0

Tente isso:

<script> 
var elements  = document.querySelectorAll('.t');
elements.forEach(function(value, key){
    elements[key].addEventListener("click",selecionar);
});

function selecionar(item)
{
    let marked = this.checked;

    elements.forEach(function(value, key){
    elements[key].checked = false;
  });

  if(marked === true) this.checked = true;
}
</script>

E teste aqui: https://jsfiddle.net/sLpevgae/32/

2
  • Mas do jeito que vc fez depois que vc da o Check no botão não da para tirar mais! Justamente o que ele NÃO quer...
    – hugocsl
    Commented 5/03/2018 às 20:58
  • Muito bem observado, corrigido. Obrigado.
    – João Dias
    Commented 5/03/2018 às 20:59
-1

Um código simples pra fazer isso

<div class="input-group">
    <label for="item1"><input type="checkbox" name="selecionar" id="item1" data-info="item1" value="item1"> Item 1 </label><br>
    <label for="item2"><input type="checkbox" name="selecionar" id="item2" data-info="item2" value="item2"> Item 2 </label><br>
    <label for="item3"><input type="checkbox" name="selecionar" id="item3" data-info="item3" value="item3"> Item 3 </label>
</div>

<script>
    let inputs = document.querySelectorAll('.input-group input[name=selecionar]');
    inputs.forEach(element => {
        element.addEventListener('click', (e)=>{
            for (let i = 0; i < inputs.length; i++) {
                if (inputs[i].getAttribute('data-info') !== e.target.value) {
                    inputs[i].checked = false
                }
            }
        })
    })
</script>

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 .