Background-color Td radiobutton

Question

I’m having a hard time solving this situation. I have in my table a list with radio button, it happens that when selecting an option, it works perfectly coloring the td Background, but when I select the second option it also selects the background of another td having 2 color options and it is selected only a radio button, simulating a checkbox that is not my case. If you can help me, I would be very grateful. Thank you!

$(document).ready(function(){
  $('.table tr').click(function(){
  $trClass = $(this).attr('class');
  if ($trClass == undefined || $trClass == 'desclicado'){
    $(this).attr('class', 'clicado');
  } else {
    $(this).attr('class', 'desclicado');
  }
  });
});

.clicado{background: #000; color:#fff;}
.desclicado{background: #fff; color: #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input id="id_bairro" name="id_bairro" value="1" type="radio"/>01</td>
      <td>teste 01</td>
    </tr>
    <tr>
      <td><input id="id_bairro" name="id_bairro" value="2" type="radio"/>01</td>
      <td>teste 02</td>
    </tr>
  </tbody>
</table>

Answer 1

I would like to say that your code is very full of problems, and it would be better to redo it. This class .desclicado is unnecessary as just return the element to its initial situation by removing the class .clicado (unless you are planning to do something later with the class .desclicado. Other than that, she’s pretty useless).

$(document).ready(function(){
   $('[name="id_bairro"]', 'table').click(function(){

      // removo a classe de todas as TRs
      $('tr', 'table')
      .removeClass("clicado");

      // adiciono a classe a TR onde o radio foi clicado
      $(this)
      .closest("tr")
      .addClass("clicado");
      
   });
});

.clicado{background: #000; color:#fff;}
.desclicado{background: #fff; color: #000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input id="id_bairro" name="id_bairro" value="1" type="radio"/>01</td>
      <td>teste 01</td>
    </tr>
    <tr>
      <td><input id="id_bairro" name="id_bairro" value="2" type="radio"/>01</td>
      <td>teste 02</td>
    </tr>
  </tbody>
</table>

Answer 2

Problem solved, before closing this topic, I would like to know how to add the code below without giving conflict: (the code below selects the radiobutton by clicking on the td)

$("td").click(function(e) {
    var checkbox = $(':radio', $(this).parent()).get(0);
    var checked = checkbox.checked;
    if (checked == false){ 
		checkbox.checked = true;
    }else { 
		checkbox.checked = false;
	}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thank you!