My input checkbox does not support Javascript

Question

What I want to do with the checkbox, is the same as the radio does using the Javascript.

'Cause I just don’t use the radio?

It is because if the radio appear marked, there is no way I leave it unchecked.

I know the logic in Javascript is right, because you can see by console.log, but when I click on another input he does not clear what is marked.

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>

Answer 1

Another alternative is every time you click on an item deselect all others. You can use filter to remove only the element you have, and then apply checked = false the ones left:

Example:

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 that the querySelectorAll return a NodeList who does not have the method filter. For this reason I used the Operator spread that are the ... in :

[...boxes]

In order to create a normal array and use filter, that filtered only removing the box that is being clicked:

filter(box => box != this)

And after removing the clicked box I applied checked = false the others with:

forEach(box => box.checked = false)

With this solution you can have as many checkboxes want that will work as you want, always leaving at most one selected.

Answer 2

You can use previousElementSibling and nextElementSibling to know which checkbox is clicking.

By clicking on the first checkbox, the previousElementSibling will be null, soon it becomes easy to know if the checkbox clicked was the second, then just deselect the other.

Behold:

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>

Answer 3

Try this:

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

And test here: https://jsfiddle.net/sLpevgae/32/