1

estou com dificuldades pra resolver esta situação. Tenho em minha tabela uma lista com radio button, acontece que ao selecionar uma opção, ele funciona perfeitamente colorindo o Background do td, mas quando seleciono a segunda opção ele também seleciona o Background de outro td tendo 2 opções coloridas sendo que está selecionado só um radio button, simulando um checkbox que não é o meu caso. Se puderem me ajudar, ficarei muito agradecido. Obrigado!

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

1
  • Nilson, aproveite e veja a página de Tour do site. Lembre-se que em todas as perguntas que você faz no site, você deve escolher uma resposta (APENAS UMA) que mais te ajudou e marcar ✓. Por isso é importante ver a página Tour para saber como isso funciona.
    – Sam
    25/04/2018 às 3:29

2 Respostas 2

1

Gostaria de dizer que seu código está muito cheio de problemas, e seria melhor refazê-lo. Essa classe .desclicado é desnecessária, pois basta voltar o elemento a sua situação inicial removendo a classe .clicado (a não ser que você esteja planejando fazer alguma coisa posteriormente com a classe .desclicado. Fora isso, ela se mostra bem inútil).

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

0

Problema resolvido, antes de fechar este tópico, gostaria de saber como adicionar o código abaixo sem dar conflito: (o código abaixo seleciona o radioButton clicando em cima da 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>

Obrigado!

1
  • Mas vc resolveu ou está fazendo outra pergunta? Se vc ainda está com problema edite a sua pergunta ou então crie uma pergunta nova e marque essa como resolvida.
    – hugocsl
    25/04/2018 às 13:25

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 .