Change TD background color by clicking Radiobox Checked and changing Color again when Quitting Radiobox

Asked

Viewed 521 times

0

Good afternoon,

I would like to know how to change the background color of a TD by clicking on the radio box contained in it and exiting to another radio box of another TD back to the original background color

I am trying with the following code in Jquery below:

 $(document).on('click', '.td_data_consulta', function() {
        if ($(this).is(':checked')) {
            $(this).parent().css('background', '#90EE90');
            $(this).parent().parent().find('.hr_consulta').css('background', '#90EE90');
        } else {
            $(this).parent().css('background', 'white');
            $(this).parent().parent().find('.hr_consulta').css('background', 'white');
        }
    });
    <table class='table table-responsive table-hover table-condensed' id='table_horarios_consultas'>
      <thead>
        <tr>
          <th></th>
          <th>Data</th>
          <th>Hora</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type='radio' class='td_data_consulta' name='marc_data_consulta' id='' value=''> </td>
        <td name=dt_consulta class='dt_consulta' id=''></td>
        <td name=hr_consulta class='hr_consulta' id=''></td>
      </tr>
    </tbody>
    </table>

But it only changes color when I click for the first time, when I click on another Radiobox of another TD the color does not go back to the previous one, it remains in the color that was changed when clicking.

Someone knows how to fix this?

Thank you, from now on.

[RESOLVED]

I was able to solve it this way:

// Ao clicar em um input do type="radio" de class = td_data_consulta
$(document).on('click', '.td_data_consulta', function() {
    // Agora vamos passar por todos elementos tr de class = tr_marca_consulta, definindo um bg padrão (branco)	
    $('.tr_marca_consulta').each(function() {
        $(this).css('background-color','white');
    });
    // E agora definimos o elemento atual (mais proximo do radio) com o background #9AFF9A
    $(this).closest('.tr_marca_consulta').css('background-color','#9AFF9A');
});

jquery

  • Do not use the question area to put the answers. If you can solve it, enter (if you want) the code in the answer area.

1 answer

1

The ideal is that you do it with class :D

In CSS add:

.hr_consulta,
.hr_consulta .td_data_consulta { background: #FFFFFF; }
.hr_consulta.selecionado,
.hr_consulta.selecionado .td_data_consulta { background: #90EE90; }

In Javascript, replace:

$(document).on('click', '.td_data_consulta', function() {
    if ($(this).is(':checked')) {
        $(this).parent().css('background', '#90EE90');
        $(this).parent().parent().find('.hr_consulta').css('background', '#90EE90');
    } else {
        $(this).parent().css('background', 'white');
        $(this).parent().parent().find('.hr_consulta').css('background', 'white');
    }
});

For

$(document).on('click', '.td_data_consulta', function() {
    $('.selecionado').removeClass('selecionado');
    if ($(this).is(':checked') ){
        $(this).closest('.hr_consulta').addClass('selecionado');
    }
});

Give me a feedback if it works blz

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.